*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
body {
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  min-height: 100%;
  font-size: 12px;
  line-height: 1;
  color: #999;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;
  background: #f4f6f8;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
/* IE 6/7 */
.clearfix {
  zoom: 1;
}
.bg-white {
  background-color: #fff !important;
}
.bg-base {
  background-color: #f4f6f8 !important;
}
.bg-f2 {
  background: #f2f2f2 !important;
}
.text-primary {
  color: #108ee9 !important;
}
.text-danger {
  color: #ff4c52 !important;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.in-main {
  position: relative;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  display: block;
  overflow: hidden;
}
.in-main.big {
  max-width: 900px;
}
.flex-main {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
}
.flex-main.big {
  max-width: 900px;
}
.flex-main .scrolling-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-bottom: 20px;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/****************
****媒体查询*****
*****************/
html {
  font-size: 312.5%;
}
@media screen and (max-width: 359px) and (orientation: portrait) {
  html {
    font-size: 266.67%;
  }
}
@media screen and (min-width: 360px) and (max-width: 374px) and (orientation: portrait) {
  html {
    font-size: 300%;
  }
}
@media screen and (min-width: 384px) and (max-width: 399px) and (orientation: portrait) {
  html {
    font-size: 320%;
  }
}
@media screen and (min-width: 400px) and (max-width: 413px) and (orientation: portrait) {
  html {
    font-size: 333.33%;
  }
}
@media screen and (min-width: 414px) and (max-width: 431px) and (orientation: portrait) {
  html {
    font-size: 345%;
  }
}
/* 对话框 global */
.dialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  z-index: 1010;
}
.dialog .dialog-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.dialog .dialog-close {
  display: block;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
  background: url(/res/images/close-light.png) center center no-repeat;
  background-size: .24rem auto;
  font-size: 0;
}
.dialog .dialog-main {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.dialog .dialog-bottomMain {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.dialog .red-text {
  color: #ff4c52;
}
/* 反馈 提示框 */
.success-dialog {
  display: none;
  padding: 20px 30px;
  min-width: 120px;
  z-index: 1100;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.7);
}
.success-dialog::before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.success-dialog.not-before::before {
  display: none;
}
.success-dialog .icon {
  display: block;
  margin: 0 auto;
  width: 45px;
  height: 45px;
}
.success-dialog .icon.success-icon {
  background: url(/res/images/alert-true.png) center center no-repeat;
  background-size: 45px 45px;
}
.success-dialog .icon.error-icon {
  background: url(/res/images/alert-false.png) center center no-repeat;
  background-size: 45px 45px;
}
.success-dialog .icon.loading-icon {
  background: url(/res/images/alert-loading.gif) center center no-repeat;
  background-size: 45px 45px;
}
.success-dialog .icon.loading-icon::before {
  content: '';
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: transparent;
  opacity: 0;
}
.success-dialog .text {
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
/* 对话框 */
.confirm-dialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1010;
}
.confirm-dialog .dialog-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.confirm-dialog .dialog-main {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
  width: 80%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 5px;
}
.confirm-dialog .dialog-main .dialog-content {
  padding: 20px 15px 0;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
  color: #404040;
}
.confirm-dialog .dialog-main .dialog-content .title {
  font-size: 16px;
  font-weight: normal;
  margin: 0 0 15px 0;
}
.confirm-dialog .dialog-main .dialog-content .text {
  margin: 0 0 30px 0;
  line-height: 20px;
}
.confirm-dialog .dialog-main .dialog-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
}
.confirm-dialog .dialog-main .dialog-footer > a {
  padding: 12px 10px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-top: 1px solid #f2f2f2;
  width: 50%;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}
.confirm-dialog .dialog-main .dialog-footer > a:last-child {
  border-left: 1px solid #f2f2f2;
}
.confirm-dialog .dialog-main .dialog-footer .dialog-cancel-btn {
  color: #999999;
}
.confirm-dialog .dialog-main .dialog-footer .dialog-confirm-btn {
  color: #108ee9;
}
/* 二维码支付弹窗 */
.qrpay-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1020;
}
.qrpay-dialog .withdraw-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
}
.qrpay-dialog .dialog-main {
  position: relative;
  width: 85%;
  max-width: 400px;
  border-radius: 5px;
  background-color: #ffffff;
}
.qrpay-dialog .dialog-main .dialog-header {
  height: 50px;
  border-radius: 5px;
  background-color: #f2f2f2;
}
.qrpay-dialog .dialog-main .dialog-header .title {
  text-align: center;
  line-height: 50px;
  font-weight: 500;
  font-size: 15px;
  color: #404040;
}
.qrpay-dialog .dialog-main .dialog-close {
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  outline: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background: url(/res/images/close-light.png) center center no-repeat;
  background-size: .24rem auto;
  font-size: 0;
  cursor: pointer;
}
.qrpay-dialog .dialog-body {
  padding: 20px 20px 0;
  text-align: center;
}
.qrpay-dialog .dialog-body .qrpay-tit {
  font-size: 15px;
  color: #404040;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
}
.qrpay-dialog .dialog-body .qrpay-tit .num {
  color: #ff4c52;
}
.qrpay-dialog .dialog-body .qr-card {
  padding: 40px 20px;
}
/* 动画 */
.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
          animation-name: flash;
}
#page-loading {
  background-color: #f4f6f8;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1010;
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
}
#page-loading #loading-center {
  width: 100%;
  height: 100%;
  position: relative;
}
#page-loading #loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 4.8rem;
  width: 4.8rem;
  margin-top: -2.4rem;
  margin-left: -2.4rem;
}
#page-loading #loading-center-absolute .loader-pic {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  margin: 0 auto .2rem;
}
#page-loading #loading-center-absolute .loader-text {
  text-align: center;
  margin: 0 .3rem;
  font-size: .3rem;
  font-weight: 300;
  color: #999;
  -webkit-animation: loading-ani 1.5s -0.1s ease-in-out infinite;
  animation: loading-ani 1.5s -0.1s ease-in-out infinite;
}
.icon-switch {
  height: 30px;
  width: 50px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  background-color: #ccc;
  border-radius: 15px;
  overflow: hidden;
  z-index: 1;
}
.icon-switch::before {
  content: "";
  height: 30px;
  width: 50px;
  position: absolute;
  left: -50px;
  background-color: #4cd964;
  border-radius: 15px;
  -webkit-transition: left 0.2s ease 0s;
  transition: left 0.2s ease 0s;
  z-index: 2;
}
.icon-switch::after {
  content: "";
  height: 26px;
  width: 26px;
  background-color: #fff;
  border-radius: 15px;
  position: absolute;
  left: 2px;
  top: 2px;
  -webkit-transition: left 0.2s ease 0s;
  transition: left 0.2s ease 0s;
  z-index: 3;
}
.icon-switch.on::before {
  left: 0;
}
.icon-switch.on::after {
  left: 22px;
}
.icon-radio,
.icon-checkbox {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  color: #999;
  border: 1px solid currentColor;
  background-color: #fff;
  position: relative;
  top: -1px;
  margin-right: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.on.icon-radio,
.on.icon-checkbox {
  color: #53aff2;
}
.disabled.icon-radio,
.disabled.icon-checkbox {
  color: #dbdbdb;
}
.icon-radio {
  border-radius: 10px;
}
.icon-radio::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.icon-checkbox::after {
  content: "";
  height: 4px;
  width: 10px;
  border: 1px solid currentColor;
  border-width: 0 0 2px 2px;
  position: absolute;
  top: 1px;
  left: 3px;
  -webkit-transform: rotate(-52deg);
  transform: rotate(-52deg);
}
.icon-checkbox::before {
  content: "";
  width: 5px;
  height: 6px;
  background-color: #fff;
  position: absolute;
  right: -1px;
  top: -1px;
}
.editor-zone *,
.editor-zone *::before,
.editor-zone *::after {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
.slide-fade-enter-active {
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
.slide-fade-leave-active {
  -webkit-transition: all 0s;
  transition: all 0s;
}
.slide-fade-enter {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
  opacity: 0;
}
.slide-fade-leave,
.slide-fade-leave-to {
  display: none;
}
.fade-enter-active {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.fade-leave-active {
  -webkit-transition: all 0s;
  transition: all 0s;
}
.fade-enter {
  opacity: 0;
}
.fade-leave,
.fade-leave-to {
  display: none;
}
.fadeLeft-enter-active {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.fadeLeft-leave-active {
  -webkit-transition: all .5s;
  transition: all .5s;
}
.fadeLeft-enter {
  opacity: 0;
  -webkit-transform: translateX(30px);
          transform: translateX(30px);
}
.fadeLeft-leave,
.fadeLeft-leave-to {
  opacity: 0;
  -webkit-transform: translateX(30px);
          transform: translateX(30px);
}
.bounceDown-enter-active,
.bounceDown-leave-active {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.bounceDown-enter {
  opacity: 0;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
}
.bounceDown-leave-to {
  opacity: 0;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
}
.bounceUp-enter-active,
.bounceUp-leave-active {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.bounceUp-enter {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}
.bounceUp-leave-to {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}
.fixed-bottom-bar {
  padding-bottom: 65px;
  width: 100%;
}
.fixed-bottom-bar .menu-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: block;
  width: 100%;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
}
.fixed-bottom-bar .menu-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
  position: relative;
  border-top: 1px solid #e8e8e8;
}
.fixed-bottom-bar .menu-bar .item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 50px;
  text-align: center;
}
.fixed-bottom-bar .menu-bar .nav-block {
  display: block;
  overflow: hidden;
  color: #999999;
}
.fixed-bottom-bar .menu-bar .nav-block .icon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 10px auto 2px;
}
.fixed-bottom-bar .menu-bar .nav-block .icon.icon-home {
  background: url(/res/images/lv-menu-home.png) center center no-repeat;
  background-size: 24px 24px;
}
.fixed-bottom-bar .menu-bar .nav-block .icon.icon-type {
  background: url(/res/images/lv-menu-type.png) center center no-repeat;
  background-size: 24px 24px;
}
.fixed-bottom-bar .menu-bar .nav-block .icon.icon-youda {
  background: url(/res/images/lv-menu-youda.png) center center no-repeat;
  background-size: 24px 24px;
}
.fixed-bottom-bar .menu-bar .nav-block .icon.icon-me {
  background: url(/res/images/lv-menu-me.png) center center no-repeat;
  background-size: 24px 24px;
}
.fixed-bottom-bar .menu-bar .nav-block .icon.icon-recommend {
  background: url(/res/images/live-nb-hot.png) center center no-repeat;
  background-size: 24px 24px;
}
.fixed-bottom-bar .menu-bar .nav-block .text {
  font-size: 10px;
  line-height: 10px;
}
.fixed-bottom-bar .menu-bar .active .nav-block {
  color: #108ee9;
}
.fixed-bottom-bar .menu-bar .active .nav-block .icon-home {
  background: url(/res/images/lv-menu-home-active.png) center center no-repeat;
  background-size: 24px 24px;
}
.fixed-bottom-bar .menu-bar .active .nav-block .icon-type {
  background: url(/res/images/lv-menu-type-active.png) center center no-repeat;
  background-size: 24px 24px;
}
.fixed-bottom-bar .menu-bar .active .nav-block .icon-youda {
  background: url(/res/images/lv-menu-youda-active.png) center center no-repeat;
  background-size: 24px 24px;
}
.fixed-bottom-bar .menu-bar .active .nav-block .icon-me {
  background: url(/res/images/lv-menu-me-active.png) center center no-repeat;
  background-size: 24px 24px;
}
.fixed-bottom-bar .menu-bar .active .nav-block .icon-recommend {
  background: url(/res/images/live-nb-hot-active.png) center center no-repeat;
  background-size: 24px 24px;
}
.fixed-bottom-bar .totop-btn {
  display: none;
  position: absolute;
  right: 15px;
  top: -51px;
  z-index: 110;
  background-color: transparent;
  border: none;
}
.fixed-bottom-bar .totop-btn .icon {
  width: 36px;
  height: 36px;
  -o-object-fit: cover;
     object-fit: cover;
}
.fixed-bottom-bar .totop-btn.show {
  display: block;
}
.fixed-bottom-bar .account-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: block;
  width: 100%;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  border-top: 1px solid #e8e8e8;
}
.fixed-bottom-bar .account-bottom-bar .account-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 15px;
  background-color: #fff;
}
.fixed-bottom-bar .account-bottom-bar .account-nav .item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 48%;
          flex: 0 0 48%;
  height: 50px;
  padding: 5px 0;
  text-align: center;
}
.fixed-bottom-bar .account-bottom-bar .account-nav .item .btn {
  display: block;
  height: 39px;
  width: 100%;
  border-radius: 5px;
  background-color: #108ee9;
  border: 1px solid #108ee9;
  font-size: 15px;
  font-weight: 500;
  line-height: 37px;
  color: #fff;
}
.fixed-bottom-bar .account-bottom-bar .account-nav .item .btn[disabled=disabled] {
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  color: #fff;
}
.fixed-bottom-bar .account-bottom-bar .account-nav .item .btn1 {
  display: block;
  height: 39px;
  width: 100%;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #108ee9;
  font-size: 15px;
  font-weight: 500;
  line-height: 37px;
  color: #108ee9;
}
.fixed-bottom-bar .account-bottom-bar .account-nav .item .btn1[disabled=disabled] {
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  color: #fff;
}
.fixed-bottom-bar .sales-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  margin: auto;
  display: block;
  width: 100%;
  min-width: 320px;
  max-width: 640px;
}
.fixed-bottom-bar .sales-bottom-bar .sales-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 15px;
}
.fixed-bottom-bar .sales-bottom-bar .sales-nav .item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 50px;
  padding: 5px 0;
  text-align: center;
}
.fixed-bottom-bar .sales-bottom-bar .sales-nav .item .btn {
  display: block;
  height: 39px;
  width: 100%;
  border-radius: 5px;
  background-color: #108ee9;
  border: 1px solid #108ee9;
  font-size: 15px;
  font-weight: 500;
  line-height: 37px;
  color: #fff;
}
.fixed-bottom-bar .sales-bottom-bar .sales-nav .item .btn[disabled=disabled] {
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  color: #fff;
}
.fixed-bottom-bar .sales-bottom-bar .sales-nav .item .btn1 {
  display: block;
  height: 39px;
  width: 100%;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #108ee9;
  font-size: 15px;
  font-weight: 500;
  line-height: 37px;
  color: #108ee9;
}
.fixed-bottom-bar .sales-bottom-bar .sales-nav .item .btn1[disabled=disabled] {
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  color: #fff;
}
.detail-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: block;
  width: 100%;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  border-top: 1px solid #e8e8e8;
}
.detail-bottom-bar .totop-btn {
  display: block;
  width: 44px;
  height: 44px;
  position: absolute;
  left: 15px;
  top: -59px;
  z-index: 110;
  background-color: rgba(0, 0, 0, 0.4);
  border: none;
  border-radius: 5px;
  text-align: center;
}
.detail-bottom-bar .totop-btn .icon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 2px auto 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.detail-bottom-bar .totop-btn .text {
  display: block;
  font-size: 10px;
  line-height: 14px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-bottom-bar .totop-btn.show {
  display: block;
}
.detail-bottom-bar .totop-btn.second {
  top: -118px;
}
.detail-bottom-bar .bottom-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 50px;
  background-color: #fff;
}
.detail-bottom-bar .bottom-toolbar .left-btns-zone {
  height: 100%;
}
.detail-bottom-bar .bottom-toolbar .right-btns-zone {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 100%;
  font-size: 0;
}
.detail-bottom-bar .tool-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
.detail-bottom-bar .tool-btns .item {
  margin: 0 .08rem;
  width: .88rem;
  height: 50px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.detail-bottom-bar .tool-btns .item a {
  display: block;
  width: 100%;
  height: 100%;
}
.detail-bottom-bar .tool-btns .icon {
  display: block;
  margin: 5px auto 2px;
  width: 24px;
  height: 24px;
  vertical-align: top;
}
.detail-bottom-bar .tool-btns .text {
  display: block;
  font-size: 10px;
  line-height: 17px;
  color: #999999;
}
.detail-bottom-bar .btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 50px;
}
.detail-bottom-bar .btns .btn {
  height: 50px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: block;
}
.detail-bottom-bar .buy-btn {
  display: block;
  width: 100%;
  padding: 0;
  background-color: #ff4c52;
  border: none;
  border-radius: 0;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
}
.detail-bottom-bar .turn-btn {
  display: block;
  width: 100%;
  padding: 0;
  background-color: #108ee9;
  border: none;
  border-radius: 0;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
}
.detail-bottom-bar .disabled-btn {
  display: block;
  width: 100%;
  padding: 0;
  background-color: #e3e3e3;
  border: none;
  border-radius: 0;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
}
.detail-bottom-bar .default-btn {
  width: 100%;
  padding: 0;
  border-radius: 0;
  background-color: #535353;
  border: none;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
}
.subject-nav {
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
}
.subject-nav > .item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.subject-nav > .item .nav-block {
  display: block;
  padding: 14px 0 8px;
  text-align: center;
}
.subject-nav > .item .nav-block .icon {
  width: .88rem;
  height: .88rem;
  margin-bottom: 8px;
}
.subject-nav > .item .nav-block .text {
  font-size: 13px;
  line-height: 1.23;
  color: #999999;
}
.lessons-main .item {
  position: relative;
  margin: 15px;
  padding-bottom: 15px;
}
.lessons-main .item:not(:last-child) {
  position: relative;
  border-bottom: 1px solid #f2f2f2;
}
.lessons-main .item:last-child {
  margin-bottom: 0;
}
.lessons-main .nav-block {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.lessons-main .nav-block .cover-img {
  position: relative;
  margin-right: 10px;
  min-width: 80px;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  overflow: hidden;
}
.lessons-main .nav-block .cover-img > .img {
  width: 80px;
  height: 80px;
  -o-object-fit: cover;
     object-fit: cover;
}
.lessons-main .nav-block .cover-img .lali-topic-bar {
  width: 100%;
  height: .8rem;
  position: absolute;
  left: 0;
  bottom: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.4)));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}
.lessons-main .nav-block .cover-img .lali-topic-bar .tip-price {
  position: absolute;
  bottom: 5px;
  left: 5px;
  display: inline-block;
  /*width: 50px;*/
  line-height: 12px;
  padding: 2px 4px;
  border-radius: 2px;
  background-color: #ff4c52;
  font-size: 10px;
  color: #fff;
  text-align: center;
  font-weight: 300;
}
.lessons-main .nav-block .cover-img .lali-topic-bar .soldout {
  position: absolute;
  bottom: 25px;
  left: 5px;
  display: inline-block;
  width: 50px;
  line-height: 12px;
  padding: 2px 4px;
  border-radius: 2px;
  background-color: #999999;
  font-size: 10px;
  color: #fff;
  text-align: center;
  font-weight: 300;
}
.lessons-main .nav-block .cover-img .lesson-source {
  position: absolute;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.lessons-main .nav-block .cover-img .lesson-source .v-icon {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
}
.lessons-main .nav-block .main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
}
.lessons-main .nav-block .main .ls-name {
  margin-bottom: 20px;
  height: 22px;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: #404040;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lessons-main .nav-block .main .times-zone {
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.lessons-main .nav-block .main .times-zone .t-after {
  margin-right: 4px;
  width: 54px;
  height: 14px;
  border-radius: 2px;
  background-color: #108ee9;
  text-align: center;
  line-height: 14px;
  font-size: 10px;
  color: #ffffff;
}
.lessons-main .nav-block .main .times-zone .t-deteil {
  font-size: 12px;
  line-height: 14px;
  color: #999999;
}
.lessons-main .nav-block .main .times-zone .t-living {
  position: relative;
  height: 16px;
  padding-left: 24px;
}
.lessons-main .nav-block .main .times-zone .t-living .icon {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: -4px;
}
.lessons-main .nav-block .main .times-zone .t-living .text {
  font-size: 12px;
  line-height: 14px;
  color: #108ee9;
}
.lessons-main .nav-block .main .series-info {
  display: none;
  font-size: 12px;
  line-height: 14px;
  color: #999999;
}
.lessons-main .nav-block .main .learned {
  position: relative;
  font-size: 12px;
  line-height: 14px;
  color: #999999;
  vertical-align: top;
}
.lessons-main .nav-block .main .learned .icon-listen {
  margin-right: 4px;
  display: inline-block;
  width: 12px;
  height: 14px;
  background: url(/res/images/lv-ico-listen.png) left center no-repeat;
  background-size: 12px 10px;
  vertical-align: top;
}
.lessons-main .nav-block .main .teacher-zone {
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 80%;
}
.lessons-main .nav-block .main .teacher-zone .avatar-zone {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20px;
          flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin-right: 10px;
}
.lessons-main .nav-block .main .teacher-zone .avatar-zone .avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.lessons-main .nav-block .main .teacher-zone .teacher-name {
  display: block;
  min-height: 14px;
  font-size: 12px;
  color: #4c4c4c;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lessons-main .nav-block .main .duration {
  margin-bottom: 10px;
  max-width: 80%;
  display: block;
  font-size: 12px;
  color: #999999;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lessons-main .nav-block .main .price {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  min-width: 42px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 10px;
  color: #ff4c52;
}
.lessons-main .nav-block .main .study-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  display: block;
  padding: .1rem .2rem;
  border-radius: 5px;
  border: solid 1px #108ee9;
  background-color: transparent;
  font-size: .3rem;
  line-height: 1;
  color: #108ee9;
  text-align: center;
}
.lessons-main .nav-block .main .price-zone {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 42px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  font-size: 10px;
  color: #ff4c52;
}
.lessons-main .nav-block .main .price-zone .vip-pri-zone {
  margin-left: 5px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 2px;
  font-size: 0;
  overflow: hidden;
}
.lessons-main .nav-block .main .price-zone .vip-pri-zone .i-vip {
  padding: 1px 3px;
  display: inline-block;
  background-color: #e6c350;
  background-image: -webkit-gradient(linear, left top, right top, from(#f4d87a), to(#e6c350));
  background-image: linear-gradient(to right, #f4d87a, #e6c350);
  font-size: 12px;
  line-height: 16px;
  color: #fff;
}
.lessons-main .nav-block .main .price-zone .vip-pri-zone .vip-pri {
  display: inline-block;
  padding: 0 2px;
  border: 1px solid #dab53a;
  font-size: 12px;
  color: #dab53a;
  background-color: #fff;
  line-height: 16px;
}
.lessons-main .nav-block.series .cover-img {
  position: relative;
}
.lessons-main .nav-block.series .cover-img::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 24px;
  height: 22px;
  background: url(/res/images/lv-icon-series.png) 0 0 no-repeat;
  background-size: contain;
}
.lessons-main .nav-block.series .main .series-info {
  margin-bottom: 10px;
  display: block;
}
.lessons-main .nav-block.series .main .ls-name {
  margin-bottom: 16px;
}
.lessons-main .nav-block.featured .cover-img {
  height: 100px;
}
.lessons-main .nav-block.featured .cover-img > .img {
  width: 80px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}
.lessons-main .nav-block.featured .cover-img::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 24px;
  height: 22px;
  background: url(/res/images/lv-icon-featured.png) 0 0 no-repeat;
  background-size: contain;
}
.lessons-main .nav-block.featured .main .ls-name {
  margin-bottom: 16px;
}
.lessons-main .nav-block.wk-lesson .cover-img {
  position: relative;
  margin-right: 10px;
  min-width: 80px;
  width: 80px;
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
}
.lessons-main .nav-block.wk-lesson .cover-img > .img {
  width: 80px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}
.lessons-main .nav-block.wk-lesson .main .ls-name {
  margin-bottom: 16px;
}
.lessons-main .nav-block.not-badge .cover-img::before {
  display: none;
}
.lessons-main .set-btn {
  position: absolute;
  right: -15px;
  bottom: 0;
  z-index: 10;
  padding: 10px 15px;
  background-color: transparent;
  border: none;
}
.lessons-main .set-btn .icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
.lessons-main .set-btn .text {
  font-size: 12px;
  line-height: 24px;
  color: #999999;
  vertical-align: middle;
}
.lv-lesson-mod {
  display: block;
  margin-bottom: 10px;
  background-color: #fff;
  overflow: hidden;
}
.lv-lesson-mod .lesson-mod-header {
  position: relative;
  margin: 0 15px;
  padding: 18px 0 15px;
  border-bottom: 1px solid #f2f2f2;
}
.lv-lesson-mod .lesson-mod-header .title {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
  line-height: 15px;
}
.lv-lesson-mod .lesson-mod-header .more-btn {
  position: absolute;
  right: 0;
  top: 3px;
  z-index: 1;
  display: inline-block;
  padding: 15px;
  line-height: 15px;
}
.lv-lesson-mod .lesson-mod-header .more-btn .icon {
  width: 12px;
  height: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
}
.lv-lesson-mod .lesson-mod-header .more-btn .text {
  margin-right: 6px;
  font-size: 12px;
  line-height: 15px;
  color: #999999;
  vertical-align: middle;
}
.lv-lesson-mod .lessons-wrapper {
  padding: 0 0 3px 0;
}
.lv-lesson-mod.category-mod .lessons-main .item:first-child {
  margin-top: 15px;
}
.lv-lesson-mod.homepage .lessons-main .item {
  margin-top: 15px;
}
.lv-lesson-mod .load-more-btn {
  display: block;
  width: 100%;
  padding: 10px;
  line-height: 20px;
  font-size: 15px;
  color: #999999;
  font-weight: 400;
  text-align: center;
  border: none;
  border-top: 1px solid #f2f2f2;
  background-color: transparent;
  outline: none;
}
.lv-lesson-mod .load-more-btn .text {
  vertical-align: middle;
}
.lesson-nav-block {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.lesson-nav-block .cover-img {
  position: relative;
  margin-right: 10px;
  min-width: 80px;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  overflow: hidden;
}
.lesson-nav-block .cover-img > .img {
  width: 80px;
  height: 80px;
  -o-object-fit: cover;
     object-fit: cover;
}
.lesson-nav-block .cover-img .lali-topic-bar {
  width: 100%;
  height: .8rem;
  position: absolute;
  left: 0;
  bottom: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.4)));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}
.lesson-nav-block .cover-img .lali-topic-bar .tip-price {
  position: absolute;
  bottom: 5px;
  left: 5px;
  display: inline-block;
  width: 50px;
  line-height: 12px;
  padding: 2px 4px;
  border-radius: 2px;
  background-color: #ff4c52;
  font-size: 10px;
  color: #fff;
  text-align: center;
  font-weight: 300;
}
.lesson-nav-block .cover-img .lali-topic-bar .soldout {
  position: absolute;
  bottom: 5px;
  right: 5px;
  display: inline-block;
  width: 50px;
  line-height: 12px;
  padding: 2px 4px;
  border-radius: 2px;
  background-color: #999999;
  font-size: 10px;
  color: #fff;
  text-align: center;
  font-weight: 300;
}
.lesson-nav-block .cover-img .lesson-source {
  position: absolute;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.lesson-nav-block .cover-img .lesson-source .v-icon {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
}
.lesson-nav-block .main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
}
.lesson-nav-block .main .ls-name {
  margin-bottom: 4px;
  height: 42px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #404040;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lesson-nav-block .main .times-zone {
  margin-bottom: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.lesson-nav-block .main .times-zone .t-after {
  margin-right: 4px;
  width: 54px;
  height: 16px;
  border-radius: 2px;
  background-color: #108ee9;
  text-align: center;
  line-height: 16px;
  font-size: 10px;
  color: #ffffff;
}
.lesson-nav-block .main .times-zone .t-deteil {
  font-size: 12px;
  line-height: 16px;
  color: #999999;
}
.lesson-nav-block .main .times-zone .t-living {
  position: relative;
  height: 16px;
  padding-left: 24px;
}
.lesson-nav-block .main .times-zone .t-living .icon {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: -4px;
}
.lesson-nav-block .main .times-zone .t-living .text {
  font-size: 12px;
  line-height: 16px;
  color: #108ee9;
}
.lesson-nav-block .main .series-info {
  display: none;
  font-size: 12px;
  line-height: 16px;
  color: #999999;
}
.lesson-nav-block .main .learned {
  position: relative;
  font-size: 12px;
  line-height: 14px;
  color: #999999;
  vertical-align: top;
}
.lesson-nav-block .main .learned .icon-listen {
  margin-right: 4px;
  display: inline-block;
  width: 12px;
  height: 14px;
  background: url(/res/images/lv-ico-listen.png) left center no-repeat;
  background-size: 12px 10px;
  vertical-align: top;
}
.lesson-nav-block .main .teacher-zone {
  margin-bottom: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 80%;
}
.lesson-nav-block .main .teacher-zone .avatar-zone {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20px;
          flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin-right: 10px;
}
.lesson-nav-block .main .teacher-zone .avatar-zone .avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.lesson-nav-block .main .teacher-zone .teacher-name {
  display: block;
  min-height: 14px;
  font-size: 12px;
  color: #4c4c4c;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lesson-nav-block .main .duration {
  margin-bottom: 5px;
  max-width: 80%;
  display: block;
  font-size: 12px;
  color: #999999;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lesson-nav-block .main .price {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  min-width: 42px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 10px;
  color: #ff4c52;
}
.lesson-nav-block .main .study-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  display: block;
  padding: .1rem .2rem;
  border-radius: 5px;
  border: solid 1px #108ee9;
  background-color: transparent;
  font-size: .3rem;
  line-height: 1;
  color: #108ee9;
  text-align: center;
}
.lesson-nav-block .main .price-zone {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 42px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  font-size: 10px;
  color: #ff4c52;
}
.lesson-nav-block .main .price-zone .vip-pri-zone {
  margin-left: 5px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 2px;
  font-size: 0;
  overflow: hidden;
}
.lesson-nav-block .main .price-zone .vip-pri-zone .i-vip {
  padding: 1px 3px;
  display: inline-block;
  background-color: #e6c350;
  background-image: -webkit-gradient(linear, left top, right top, from(#f4d87a), to(#e6c350));
  background-image: linear-gradient(to right, #f4d87a, #e6c350);
  font-size: 12px;
  line-height: 16px;
  color: #fff;
}
.lesson-nav-block .main .price-zone .vip-pri-zone .vip-pri {
  display: inline-block;
  padding: 0 2px;
  border: 1px solid #dab53a;
  font-size: 12px;
  color: #dab53a;
  background-color: #fff;
  line-height: 16px;
}
.lesson-nav-block.series .cover-img {
  position: relative;
}
.lesson-nav-block.series .cover-img::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 24px;
  height: 22px;
  background: url(/res/images/lv-icon-series.png) 0 0 no-repeat;
  background-size: contain;
}
.lesson-nav-block.series .main .series-info {
  display: block;
}
.lesson-nav-block.featured .cover-img {
  position: relative;
  margin-right: 10px;
  min-width: 100px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
}
.lesson-nav-block.featured .cover-img > .img {
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}
.lesson-nav-block.featured .cover-img::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 24px;
  height: 22px;
  background: url(/res/images/lv-icon-featured.png) 0 0 no-repeat;
  background-size: contain;
}
.lesson-nav-block.featured .main .ls-name {
  margin-bottom: 4px;
  height: 44px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #191919;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lesson-nav-block.not-badge .cover-img::before {
  display: none;
}
.lv-type-lesson-mod {
  display: block;
  margin: 10px 0;
  background-color: #fff;
  overflow: hidden;
}
.lv-type-lesson-mod .lesson-mod-header {
  position: relative;
  margin: 0 15px;
  padding: 18px 0 15px;
  border-bottom: 1px solid #f2f2f2;
}
.lv-type-lesson-mod .lesson-mod-header .title {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
  line-height: 15px;
}
.lv-type-lesson-mod .lesson-mod-header .more-btn {
  position: absolute;
  right: 0;
  top: 3px;
  z-index: 1;
  display: inline-block;
  padding: 15px;
  line-height: 15px;
}
.lv-type-lesson-mod .lesson-mod-header .more-btn .icon {
  width: 12px;
  height: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
}
.lv-type-lesson-mod .lesson-mod-header .more-btn .text {
  margin-right: 6px;
  font-size: 12px;
  line-height: 15px;
  color: #999999;
  vertical-align: middle;
}
.lv-type-lesson-mod .type-lessons-main {
  margin: 15px 15px 0;
  position: relative;
  padding: 0 0 15px 0;
  font-size: 0;
}
.lv-type-lesson-mod .type-lessons-main .item {
  position: relative;
  display: inline-block;
  width: 32%;
  margin: 0 0 15px 0;
  font-size: 12px;
}
.lv-type-lesson-mod .type-lessons-main .item:nth-of-type(3n-1) {
  margin: 0 2% 15px;
}
.lv-type-lesson-mod .type-lessons-main .item:nth-last-child(1),
.lv-type-lesson-mod .type-lessons-main .item:nth-last-child(2),
.lv-type-lesson-mod .type-lessons-main .item:nth-last-child(3) {
  margin-bottom: 0;
}
.lv-type-lesson-mod .type-lessons-main .item .item-cover-img {
  position: relative;
  width: 100%;
  height: 0;
  margin-bottom: 7px;
  padding-bottom: 100%;
  border-radius: 5px;
  overflow: hidden;
}
.lv-type-lesson-mod .type-lessons-main .item .item-cover-img .icon-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.lv-type-lesson-mod .type-lessons-main .item .item-cover-img .bar {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 20px;
  padding: 0 5px;
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 12px;
  line-height: 20px;
  color: #fff;
}
.lv-type-lesson-mod .type-lessons-main .item .ls-name {
  margin-bottom: 4px;
  height: 33.6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: #313131;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lv-type-lesson-mod .type-lessons-main .item .ls-person {
  display: block;
  height: 12px;
  font-size: 12px;
  line-height: 12px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lv-type-lesson-mod .type-lessons-main .item.series .item-cover-img::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 24px;
  height: 22px;
  background: url(/res/images/lv-icon-series.png) 0 0 no-repeat;
  background-size: contain;
}
.lv-type-lesson-mod .type-wrapper .type-lessons-main {
  padding: 0 0 18px 0;
}
.lv-youda-wrapper {
  padding-top: 15px;
  background-color: #fff;
}
.more-loading,
.not-more {
  padding: 10px;
  margin: 10px 0;
  text-align: center;
}
.more-loading .text,
.not-more .text {
  text-align: center;
  font-size: 15px;
  color: #999999;
}
.more-loading1 {
  margin: 10px 0;
  text-align: center;
}
.more-loading1 .icon-loading {
  vertical-align: top;
  height: 25px;
}
.control-zone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 100;
  padding: 6px 0 5px;
  min-width: 320px;
  max-width: 640px;
  background-color: #fff;
  border-bottom: 1px solid #f2f2f2;
  overflow: hidden;
}
.category-control {
  position: relative;
  display: inline-block;
  width: auto;
  white-space: nowrap;
  font-size: 0;
  z-index: 10;
}
.category-control .item {
  display: inline-block;
  height: 42px;
  line-height: 40px;
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
  font-size: .28rem;
  font-weight: 500;
  color: #999999;
}
.category-control .item .text {
  display: block;
  border-bottom: 2px solid transparent;
}
.category-control .item.on {
  color: #108ee9;
}
.category-control .item.on .text {
  border-bottom: 2px solid #108ee9;
}
.home-subscribe-zone {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin: auto;
  max-width: 640px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.home-subscribe-zone .wrapper-zone {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
}
.home-subscribe-zone .subscribe-btn {
  width: 35px;
  height: 42px;
  padding: 0;
  border: none;
  background-color: #fff;
  font-size: 20px;
  color: #999999;
}
.home-subscribe-zone .subscribe-btn .icon {
  width: 22px;
  height: 22px;
}
.home-subscribe-position {
  position: relative;
  width: 100%;
  height: 42px;
}
.home-subscribe-position .home-subscribe-zone.fixed-top {
  position: fixed;
}
.not-result-main {
  padding: 100px 0 50px;
}
.result-main,
.not-result-main {
  margin-top: 106px;
}
.result-main.no-margintop,
.not-result-main.no-margintop {
  margin-top: 0;
}
.not-content .not-content-img {
  display: block;
  margin: 0 auto 15px;
  width: 103px;
}
.not-content .not-content-text {
  margin: 0 50px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #999999;
}
/* 精品课程推荐 */
.live-recommend-list {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.live-recommend-list > li {
  margin: .3rem .3rem 0;
}
.live-recommend-list > li > .item {
  display: block;
  width: 100%;
  height: 3.2rem;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.live-recommend-list > li > .item .rli-bg {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -o-object-fit: cover;
     object-fit: cover;
}
.live-recommend-list .rli-main {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.4)));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
}
.live-recommend-list .rli-main .rli-tags-box {
  width: 100%;
  padding: 0 12px;
}
.live-recommend-list .rli-main .rli-tags-box > .tag + .tag {
  margin-left: .1rem;
}
.live-recommend-list .rli-main .rli-tags-box > .listen-num {
  float: left;
  display: block;
  height: .36rem;
  line-height: .36rem;
  padding: 0 .04rem;
  background-color: #108ee9;
  border-radius: 2px;
}
.live-recommend-list .rli-main .rli-tags-box > .listen-num .text {
  -webkit-transform: scale(0.86, 0.86);
  transform: scale(0.86, 0.86);
  font-size: .24rem;
  font-weight: 500;
  color: #ffffff;
}
.live-recommend-list .rli-main .rli-tags-box .big-live {
  float: left;
  height: .36rem;
  line-height: .36rem;
  padding: 0 .04rem;
  background-color: #ff4c52;
  border-radius: 2px;
}
.live-recommend-list .rli-main .rli-tags-box .big-live .text {
  display: block;
  -webkit-transform: scale(0.86, 0.86);
  transform: scale(0.86, 0.86);
  color: #fff;
  font-size: .24rem;
}
.live-recommend-list .rli-main .rli-details {
  position: absolute;
  bottom: .2rem;
  left: 0;
  width: 100%;
}
.live-recommend-list .rli-main .i-title {
  margin: .1rem 12px;
  font-size: .34rem;
  font-weight: 400;
  line-height: 1.47;
  color: #ffffff;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  text-shadow: 0.013333rem 0.013333rem 0.013333rem rgba(0, 0, 0, 0.3);
}
.live-recommend-list .rli-main .i-other-info {
  margin: 0 12px;
}
.live-recommend-list .rli-main .i-other-info > .i-oth + .i-oth {
  margin-left: .1rem;
}
.live-recommend-list .rli-main .i-other-info .live-tag {
  float: left;
  height: .36rem;
  line-height: .32rem;
  padding: 0 .04rem;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  border: 1px solid #fff;
}
.live-recommend-list .rli-main .i-other-info .live-tag .text {
  display: block;
  -webkit-transform: scale(0.86, 0.86);
  transform: scale(0.86, 0.86);
  color: #fff;
  font-size: .24rem;
}
.live-recommend-list .rli-main .i-other-info .live-time1 {
  float: left;
  height: .36rem;
  line-height: .36rem;
}
.live-recommend-list .rli-main .i-other-info .live-time1 .text {
  display: block;
  color: #fff;
  font-size: .24rem;
}
.live-recommend-list .rli-main .i-other-info .live-time2 {
  float: left;
  height: .36rem;
  line-height: .36rem;
  padding: 0 .04rem;
}
.live-recommend-list .rli-main .i-other-info .live-time2 .text {
  display: block;
  color: #fff;
  font-size: .24rem;
}
.activity-dialog {
  display: block;
}
.activity-dialog .activity-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
}
.activity-dialog .centen-main {
  position: relative;
  max-width: 544px;
  width: 85%;
  color: #fff;
  border-radius: 20px;
  overflow: hidden;
}
.activity-dialog .close-zone {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  width: 44px;
  height: 44px;
  cursor: pointer;
  background: transparent url(/res/images/circle-img-close.png) center center no-repeat;
  background-size: 24px;
}
/*! Flickity v2.0.8
http://flickity.metafizzy.co  */
.flickity-enabled {
  position: relative;
}
.flickity-enabled:focus {
  outline: none;
}
.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}
/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: white;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  /* vertically center */
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.flickity-prev-next-button:hover {
  background: white;
}
.flickity-prev-next-button:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0 5px #09F;
          box-shadow: 0 0 0 5px #09F;
}
.flickity-prev-next-button:active {
  opacity: 0.6;
}
.flickity-prev-next-button.previous {
  left: 10px;
}
.flickity-prev-next-button.next {
  right: 10px;
}
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}
.flickity-prev-next-button:disabled {
  opacity: 0.3;
  cursor: auto;
}
.flickity-prev-next-button svg {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}
.flickity-prev-next-button .arrow {
  fill: #333;
}
/* ---- page dots ---- */
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}
.flickity-rtl .flickity-page-dots {
  direction: rtl;
}
.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
  opacity: 1;
}
.live-banner {
  height: 3.4rem;
  overflow: hidden;
  background: url(/res/images/loading-ripple.svg) center center no-repeat;
  background-size: 50px auto;
}
.carousel-cell {
  width: 100%;
}
.carousel-cell .carousel-cell-image {
  width: 100%;
  height: 3.4rem;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 432px) {
  .live-banner {
    height: 290px;
  }
  .carousel-cell {
    width: 100%;
  }
  .carousel-cell .carousel-cell-image {
    width: 100%;
    height: 290px;
  }
}
.youda-list-mod {
  display: block;
  overflow: hidden;
  background-color: #fff;
}
.youda-list-mod .mod-header {
  position: relative;
  padding: 18px 15px 15px;
}
.youda-list-mod .mod-header .title {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
  line-height: 15px;
}
.youda-list-mod .mod-header .more-btn {
  position: absolute;
  right: 0;
  top: 3px;
  z-index: 1;
  display: inline-block;
  padding: 15px;
  line-height: 15px;
}
.youda-list-mod .mod-header .more-btn .icon {
  width: 12px;
  height: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
}
.youda-list-mod .mod-header .more-btn .text {
  margin-right: 6px;
  font-size: 12px;
  line-height: 15px;
  color: #999999;
  vertical-align: middle;
}
.youda-list-mod .menu-control {
  margin-bottom: 20px;
  position: relative;
  border-bottom: 1px solid #f2f2f2;
}
.youda-list-mod .menu-control .menu-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.youda-list-mod .menu-control .menu-list .item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 46px;
  border-bottom: 2px solid transparent;
  text-align: center;
  cursor: pointer;
}
.youda-list-mod .menu-control .menu-list .item .text {
  font-size: 15px;
  line-height: 44px;
  text-align: center;
  color: #999999;
}
.youda-list-mod .menu-control .menu-list .item.undispos .text {
  position: relative;
}
.youda-list-mod .menu-control .menu-list .item.undispos .text::after {
  content: '';
  display: block;
  position: absolute;
  right: -15px;
  top: 50%;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 505px;
  background-color: #f67276;
}
.youda-list-mod .menu-control .menu-list .item.active {
  border-bottom-color: #53aff2;
}
.youda-list-mod .menu-control .menu-list .item.active .text {
  color: #53aff2;
}
.youda-list-mod .lv-youda-mod {
  overflow: hidden;
  padding: 0 0 18px;
}
.youda-list-mod .lv-youda-mod.detail {
  padding: 0;
}
.youda-list-mod .lv-youda-mod .item {
  margin: 0 15px;
  padding: 15px 0;
}
.youda-list-mod .lv-youda-mod .item:first-child {
  padding-top: 0;
}
.youda-list-mod .lv-youda-mod .item:last-child {
  padding-bottom: 0;
}
.youda-list-mod .lv-youda-mod .item:not(:last-child) {
  position: relative;
  border-bottom: 1px solid #f2f2f2;
}
.youda-list-mod .lv-youda-mod .item.datail-last {
  padding: 0;
}
.youda-list-mod .lv-youda-mod .item.datail-last .nav-block {
  display: block;
  padding: .3rem 0;
  font-size: 15px;
  text-align: center;
  color: #108ee9;
  line-height: 20px;
}
.youda-list-mod .lv-youda-mod .item.datail-last .nav-block .youda-num {
  font-weight: 500;
}
.youda-list-mod .lv-youda-mod.first-padding-top .item:first-child {
  padding-top: 15px;
}
.youda-list-mod .lv-youda-mod .youda-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.youda-list-mod .lv-youda-mod .youda-header .avatar-zone {
  width: 38px;
  height: 38px;
  position: relative;
}
.youda-list-mod .lv-youda-mod .youda-header .avatar-zone .avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.youda-list-mod .lv-youda-mod .youda-header .avatar-zone .person-v {
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: url(/res/images/lv-person-v.png) center center no-repeat;
  background-size: 10px 10px;
}
.youda-list-mod .lv-youda-mod .youda-header .person-info {
  margin: 0 10px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.youda-list-mod .lv-youda-mod .youda-header .person-info .name {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.29;
  color: #404040;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.youda-list-mod .lv-youda-mod .youda-header .person-info .describe {
  font-size: 12px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.youda-list-mod .lv-youda-mod .youda-header .person-info .tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.youda-list-mod .lv-youda-mod .youda-header .person-info .tags .tag {
  display: inline-block;
  padding: 0 10px;
  height: 20px;
  border-radius: 3px;
  border: solid 1px #999999;
  font-size: 12px;
  line-height: 18px;
  color: #999999;
  text-align: center;
}
.youda-list-mod .lv-youda-mod .youda-header .person-info .tags .tag:not(:last-child) {
  margin-right: 10px;
}
.youda-list-mod .lv-youda-mod .youda-header .quiz-btn {
  display: block;
  width: 67px;
  height: 30px;
  line-height: 28px;
  border-radius: 5px;
  border: solid 1px #108ee9;
  text-align: center;
  color: #108ee9;
}
.youda-list-mod .lv-youda-mod .youda-quiz-main {
  display: block;
  margin: 10px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.53;
  color: #404040;
  word-break: break-all;
}
.youda-list-mod .lv-youda-mod .youda-quiz-main.live-detail {
  font-size: 14px;
  font-weight: 400;
  color: #707070;
  line-height: 23px;
}
.youda-list-mod .lv-youda-mod .audio-wrapper {
  margin: 10px 0;
}
.youda-list-mod .lv-youda-mod .youda-extra {
  margin-top: 10px;
  font-size: 12px;
  line-height: 20px;
  color: #999999;
}
.youda-list-mod .youda-quize-mod .fade-enter-active,
.youda-list-mod .youda-quize-mod .fade-leave-active {
  -webkit-transition: all 1s;
  transition: all 1s;
}
.youda-list-mod .youda-quize-mod .fade-enter,
.youda-list-mod .youda-quize-mod .fade-leave-active {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}
.youda-list-mod .youda-quize-mod .item {
  margin: 0 15px;
  padding: 15px 0;
}
.youda-list-mod .youda-quize-mod .item:first-child {
  padding-top: 0;
}
.youda-list-mod .youda-quize-mod .item:not(:last-child) {
  position: relative;
  border-bottom: 1px solid #f2f2f2;
}
.youda-list-mod .youda-quize-mod .item .quize-avatar,
.youda-list-mod .youda-quize-mod .item .answer-avatar {
  display: block;
  float: left;
  position: relative;
  width: 38px;
  height: 38px;
}
.youda-list-mod .youda-quize-mod .item .quize-avatar .avatar-img,
.youda-list-mod .youda-quize-mod .item .answer-avatar .avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
}
.youda-list-mod .youda-quize-mod .item .quize-avatar .person-v,
.youda-list-mod .youda-quize-mod .item .answer-avatar .person-v {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  width: 10px;
  height: 10px;
  background: url(/res/images/lv-person-v.png) center center no-repeat;
  background-size: 10px 10px;
}
.youda-list-mod .youda-quize-mod .item .quize-content {
  display: block;
  margin-left: 50px;
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
  color: #404040;
}
.youda-list-mod .youda-quize-mod .item .youda-extra {
  margin-top: 10px;
  font-size: 12px;
  line-height: 20px;
  color: #999999;
}
.youda-list-mod .youda-quize-mod .item .answer-wrapper {
  margin-left: 50px;
}
.youda-list-mod .youda-quize-mod .item .answer-wrapper .refuse-btn {
  float: right;
  height: 40px;
  background-color: transparent;
  border: none;
  font-size: 15px;
  color: #999999;
}
.youda-list-mod .youda-quize-mod .item .quize {
  margin-bottom: 15px;
}
.youda-list-mod .youda-quize-mod.first-padding-top .item:first-child {
  padding-top: 15px;
}
.youda-audio-mod {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.youda-audio-mod .audio-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: 52%;
  padding: 0 10px;
  max-width: 400px;
  min-width: 3.9rem;
  height: 40px;
  border: none;
  border-radius: 100px;
  background-color: #53aff2;
}
.youda-audio-mod .audio-bar .percent-bar {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0.3)));
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3));
  -webkit-transition: width .3s linear;
  transition: width .3s linear;
}
.youda-audio-mod .audio-bar .audio-status {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 40px;
  background-image: url(/res/images/lv-ico-play.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 28px 28px;
}
.youda-audio-mod .audio-bar .audio-status.play {
  background-image: url(/res/images/lv-ico-pause.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 28px 28px;
}
.youda-audio-mod .audio-bar .audio-status.stop {
  background-image: url(/res/images/lv-ico-play.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 28px 28px;
}
.youda-audio-mod .audio-bar .audio-status.loading {
  background-image: url(/res/images/lv-ico-loading.gif);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 28px 28px;
}
.youda-audio-mod .audio-bar .audio-status.record {
  background-image: url(/res/images/lv-ico-record.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 28px 28px;
}
.youda-audio-mod .audio-bar .audio-text {
  position: relative;
  z-index: 1;
  margin-left: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 40px;
  color: #ffffff;
}
.youda-audio-mod .audio-bar.record {
  background-color: #f67276;
}
.youda-audio-mod .audio-time {
  margin-left: 10px;
  font-size: 15px;
  line-height: 40px;
  text-align: center;
  color: #999999;
}
.youda-audio-mod .audio-time .val {
  font-style: normal;
}
@media screen and (max-width: 359px) {
  .youda-list-mod .youda-quize-mod .item .answer-wrapper .refuse-btn {
    font-size: 13px;
  }
  .answer-wrapper .youda-audio-mod .audio-bar {
    min-width: 3.6rem;
  }
}
.youda-recommend {
  margin-bottom: 10px;
  padding-bottom: 18px;
  background-color: #fff;
}
.youda-recommend-mod {
  display: block;
  overflow: hidden;
}
.youda-recommend-mod .mod-header {
  position: relative;
  padding: 18px 15px 15px;
}
.youda-recommend-mod .mod-header .title {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
  line-height: 15px;
}
.youda-recommend-mod .mod-header .more-btn {
  position: absolute;
  right: 0;
  top: 3px;
  z-index: 1;
  display: inline-block;
  padding: 15px;
  line-height: 15px;
}
.youda-recommend-mod .mod-header .more-btn .icon {
  width: 12px;
  height: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
}
.youda-recommend-mod .mod-header .more-btn .text {
  margin-right: 6px;
  font-size: 12px;
  line-height: 15px;
  color: #999999;
  vertical-align: middle;
}
.youda-recommend-mod .remd-youda-list {
  display: inline-block;
  font-size: 0;
  white-space: nowrap;
}
.youda-recommend-mod .remd-youda-list .item {
  display: inline-block;
  padding: 0 15px;
  font-size: 0;
}
.youda-recommend-mod .remd-youda-list .nav-block {
  display: block;
  width: 80px;
  overflow: hidden;
}
.youda-recommend-mod .remd-youda-list .nav-block .avatar-zone {
  position: relative;
  margin: 0 auto 15px;
  width: 80px;
  height: 80px;
  overflow: hidden;
}
.youda-recommend-mod .remd-youda-list .nav-block .avatar-zone .avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.youda-recommend-mod .remd-youda-list .nav-block .avatar-zone .person-v {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 20px;
  height: 20px;
  background: url(/res/images/lv-person-v.png) center center no-repeat;
  background-size: 20px 20px;
}
.youda-recommend-mod .remd-youda-list .nav-block .person-name {
  margin-bottom: 10px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
  color: #404040;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.youda-recommend-mod .remd-youda-list .nav-block .person-intro {
  height: 32px;
  font-size: 12px;
  line-height: 16px;
  color: #878787;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.user-homehome {
  margin-bottom: 10px;
}
.quize-container {
  margin: 10px 0;
}
.user-info-zone {
  padding: 25px 20px 20px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}
.user-info-zone .avatar-zone {
  width: 80px;
  height: 80px;
  margin: 0 auto 10px;
}
.user-info-zone .avatar-zone .avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.user-info-zone .user-nickname {
  width: 56.53333333%;
  margin: 10px auto;
  font-size: 18px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  color: #313131;
}
.user-info-zone .user-intro {
  width: 56.53333333%;
  margin: 0 auto 10px;
  font-size: 13px;
  text-align: center;
  line-height: 16px;
  color: #878787;
}
.user-info-zone .youda-listened {
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
  color: #999999;
  vertical-align: top;
}
.user-info-zone .youda-listened .icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: top;
  background: url(/res/images/youda-ico-listened.png) center center no-repeat;
  background-size: 10px 10px;
}
.user-info-zone .edit-btn {
  display: block;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1;
  width: 30px;
  text-align: center;
}
.user-info-zone .edit-btn .icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}
.user-info-zone .edit-btn .text {
  font-size: 10px;
  line-height: 10px;
  color: #999999;
}
.youda-quize-zone {
  padding-bottom: 25px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
.youda-quize-zone .mod-header {
  position: relative;
  padding: 18px 15px 15px;
}
.youda-quize-zone .mod-header .title {
  display: inline-block;
  font-size: 15px;
  font-weight: normal;
  color: #999999;
  line-height: 20px;
}
.youda-quize-zone .mod-header .title .answer-name {
  font-weight: 700;
  color: #313131;
}
.youda-quize-zone .mod-header .more-btn {
  position: absolute;
  right: 0;
  top: 3px;
  z-index: 1;
  display: inline-block;
  padding: 15px;
  line-height: 15px;
}
.youda-quize-zone .mod-header .more-btn .icon {
  width: 12px;
  height: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
}
.youda-quize-zone .mod-header .more-btn .text {
  margin-right: 6px;
  font-size: 12px;
  line-height: 15px;
  color: #999999;
  vertical-align: middle;
}
.youda-quize-zone .quize-zone {
  margin: 0 15px 13px;
  padding: 7px 10px;
  border-radius: 5px;
  background-color: #fafafa;
  border: solid 1px #e9e9e9;
}
.youda-quize-zone .quize-zone.focusing {
  -webkit-box-shadow: 0 0 10px 1px rgba(83, 175, 242, 0.3);
          box-shadow: 0 0 10px 1px rgba(83, 175, 242, 0.3);
}
.youda-quize-zone .quize-zone.error {
  -webkit-box-shadow: 0 0 10px 1px rgba(255, 76, 82, 0.35);
          box-shadow: 0 0 10px 1px rgba(255, 76, 82, 0.35);
}
.youda-quize-zone .quize-zone .quize-main {
  display: block;
  padding: 0;
  width: 100%;
  height: 65px;
  font-size: 15px;
  line-height: 20px;
  color: #404040;
  background-color: transparent;
}
.youda-quize-zone .quize-zone .quize-main::-webkit-input-placeholder {
  color: #999999;
}
.youda-quize-zone .quize-zone .word-count {
  margin-top: 4px;
  text-align: right;
  font-size: 14px;
  color: #999999;
}
.youda-quize-zone .quize-extra {
  margin: 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.youda-quize-zone .quize-extra .null-name {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 35px;
  display: table-cell;
  font-size: 0;
}
.youda-quize-zone .quize-extra .null-name .text {
  vertical-align: middle;
  margin-left: 10px;
  font-size: 15px;
  line-height: 35px;
  color: #999999;
}
.youda-quize-zone .quize-extra .quize-btn {
  min-width: 100px;
  padding: 0 10px;
  border: none;
  height: 35px;
  line-height: 35px;
  border-radius: 5px;
  background-color: #53aff2;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
}
.auto-tip-zone {
  overflow: hidden;
  -webkit-animation: autoHide 1.5s linear 4s both;
          animation: autoHide 1.5s linear 4s both;
}
.auto-tip-zone.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0 auto;
  min-width: 320px;
  max-width: 640px;
}
.auto-tip-zone .tip-text {
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #53aff2;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
}
.youda-quize-container {
  margin-bottom: 10px;
  padding: 15px 15px 20px;
  background-color: #fff;
}
.youda-quize-container .quizer-info {
  margin-bottom: 15px;
}
.youda-quize-container .quizer-info .aatar-zone {
  float: left;
  width: 38px;
  height: 38px;
}
.youda-quize-container .quizer-info .aatar-zone .avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
}
.youda-quize-container .quizer-info .info {
  margin-left: 48px;
  font-size: 12px;
  line-height: 12px;
  color: #999999;
}
.youda-quize-container .quizer-info .info .name {
  margin: 4px 0 6px 0;
}
.youda-quize-container .quize-content {
  margin: 15px 0 10px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: #404040;
}
.youda-quize-container .quize-zone {
  margin: 15px 0;
  padding: 7px 10px;
  height: 90px;
  border-radius: 5px;
  background-color: #f4f6f8;
}
.youda-quize-container .quize-zone.focusing {
  border: 1px solid rgba(83, 175, 242, 0.6);
  -webkit-box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.2);
          box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.2);
}
.youda-quize-container .quize-zone.error {
  -webkit-box-shadow: 0 0 10px 1px rgba(255, 76, 82, 0.35);
          box-shadow: 0 0 10px 1px rgba(255, 76, 82, 0.35);
}
.youda-quize-container .quize-zone .quize-main {
  display: block;
  padding: 0;
  width: 100%;
  font-size: 15px;
  line-height: 20px;
  color: #404040;
  background-color: transparent;
}
.youda-quize-container .quize-zone .quize-main::-webkit-input-placeholder {
  color: #999999;
}
.youda-quize-container .quize-zone .word-count {
  margin-top: 4px;
  text-align: right;
  font-size: 14px;
  color: #999999;
}
.youda-quize-container .quize-listented {
  display: block;
  overflow: hidden;
  height: 26px;
  white-space: nowrap;
}
.youda-quize-container .quize-listented .text {
  display: inline-block;
  height: 26px;
  line-height: 26px;
  vertical-align: top;
  font-size: 12px;
  color: #999999;
}
.youda-quize-container .quize-listented .listenter {
  height: 26px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  vertical-align: top;
}
.youda-quize-container .quize-listented .listenter .item {
  margin: 0 4px;
  width: .54rem;
  height: .54rem;
}
.youda-quize-container .quize-listented .listenter .item .avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
}
@media screen and (max-width: 359px) {
  .youda-quize-container .quize-listented .listenter .item:nth-last-child(1) {
    display: none;
  }
}
@-webkit-keyframes autoHide {
  from {
    height: 44px;
  }
  to {
    height: 0;
  }
}
@keyframes autoHide {
  from {
    height: 44px;
  }
  to {
    height: 0;
  }
}
.refuseDia {
  position: fixed;
  display: block;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}
.refuseDia .dialog-main {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
  width: 80%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 5px;
}
.refuseDia .dialog-main .dialog-content {
  padding: 20px 12px 0;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
  color: #404040;
}
.refuseDia .dialog-main .dialog-content .title {
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
  margin: 0 0 20px 0;
}
.refuseDia .dialog-main .dialog-content .text {
  margin: 0 0 20px 0;
  line-height: 20px;
  text-align: left;
  color: #999999;
}
.refuseDia .dialog-main .dialog-content .textarea-zone {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.refuseDia .dialog-main .dialog-content .textarea-zone .textarea-control {
  width: 100%;
  padding: 12px;
  height: 90px;
  border-radius: 5px;
  background-color: #edf3f9;
  font-size: 15px;
  color: #404040;
}
.refuseDia .dialog-main .dialog-content .textarea-zone .textarea-control::-webkit-input-placeholder {
  color: #999999;
}
.refuseDia .dialog-main .dialog-content .textarea-zone .textarea-control.focusing,
.refuseDia .dialog-main .dialog-content .textarea-zone .textarea-control:focus {
  border: 1px solid rgba(83, 175, 242, 0.6);
  -webkit-box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
          box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
}
.refuseDia .dialog-main .dialog-footer {
  font-size: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
}
.refuseDia .dialog-main .dialog-footer > a {
  display: inline-block;
  border-top: 1px solid #f2f2f2;
  width: 50%;
  font-size: 15px;
  text-align: center;
  padding: 12px 10px;
}
.refuseDia .dialog-main .dialog-footer > a:last-child {
  border-left: 1px solid #f2f2f2;
}
.refuseDia .dialog-main .dialog-footer .dialog-cancel-btn {
  color: #999999;
}
.refuseDia .dialog-main .dialog-footer .dialog-confirm-btn {
  color: #108ee9;
}
.confirm-submit-dialog {
  position: fixed;
  display: block;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}
.confirm-submit-dialog .dialog-main {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
  width: 80%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 5px;
}
.confirm-submit-dialog .dialog-main .dialog-content {
  padding: 20px 12px 0;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
  color: #404040;
}
.confirm-submit-dialog .dialog-main .dialog-content .title {
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
  margin: 0 0 20px 0;
}
.confirm-submit-dialog .dialog-main .dialog-content .text {
  margin: 0 20px 20px;
  line-height: 20px;
  text-align: left;
  color: #999999;
}
.confirm-submit-dialog .dialog-main .dialog-content .textarea-zone {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.confirm-submit-dialog .dialog-main .dialog-content .textarea-zone .textarea-control {
  width: 100%;
  padding: 12px;
  height: 90px;
  border-radius: 5px;
  background-color: #edf3f9;
  font-size: 15px;
  color: #404040;
}
.confirm-submit-dialog .dialog-main .dialog-content .textarea-zone .textarea-control::-webkit-input-placeholder {
  color: #999999;
}
.confirm-submit-dialog .dialog-main .dialog-content .textarea-zone .textarea-control.focusing,
.confirm-submit-dialog .dialog-main .dialog-content .textarea-zone .textarea-control:focus {
  border: 1px solid rgba(83, 175, 242, 0.6);
  -webkit-box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
          box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
}
.confirm-submit-dialog .dialog-main .dialog-footer {
  font-size: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
}
.confirm-submit-dialog .dialog-main .dialog-footer > a {
  display: inline-block;
  border-top: 1px solid #f2f2f2;
  width: 50%;
  font-size: 15px;
  text-align: center;
  padding: 12px 10px;
}
.confirm-submit-dialog .dialog-main .dialog-footer > a:last-child {
  border-left: 1px solid #f2f2f2;
}
.confirm-submit-dialog .dialog-main .dialog-footer .dialog-cancel-btn {
  color: #999999;
}
.confirm-submit-dialog .dialog-main .dialog-footer .dialog-confirm-btn {
  color: #108ee9;
}
.recordDia {
  display: block;
  position: fixed;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  background-color: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.recordDia .record-model-flex {
  min-height: 100%;
}
.recordDia .record-model-flex .model-main {
  position: relative;
  padding-bottom: 120px;
}
.recordDia .record-model-flex .model-main .model-wrapper {
  background-color: #fff;
}
.recordDia .record-model-flex .model-main .record-main {
  width: 100%;
  padding: 0 15px 40px;
  text-align: center;
}
.recordDia .record-model-flex .model-main .record-main .remind-text-wrapper {
  height: 100px;
}
.recordDia .record-model-flex .model-main .record-main .time-show {
  font-size: 22px;
  text-align: center;
  line-height: 30px;
  color: #404040;
}
.recordDia .record-model-flex .model-main .record-main .record-text {
  margin-top: 12px;
  font-size: 15px;
  text-align: center;
  color: #999999;
}
.recordDia .record-model-flex .model-main .record-main .start-text {
  margin: 0 50px;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  color: #999999;
}
.recordDia .record-model-flex .model-main .record-main .btns-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.recordDia .record-model-flex .model-main .record-main .btns-group .submit-btn,
.recordDia .record-model-flex .model-main .record-main .btns-group .retake-btn {
  padding: 10px 15px;
  background-color: transparent;
  border: none;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}
.recordDia .record-model-flex .model-main .record-main .btns-group .retake-btn {
  margin-right: .8rem;
  color: #999999;
}
.recordDia .record-model-flex .model-main .record-main .btns-group .submit-btn {
  margin-left: .8rem;
  color: #108ee9;
}
.recordDia .record-model-flex .model-main .record-main .btns-group .record-status-btns {
  width: 81px;
  height: 81px;
  padding: 3px;
  border-radius: 50%;
  overflow: hidden;
}
.recordDia .record-model-flex .model-main .record-main .btns-group .record-status-btns.shade {
  background-color: #f2f2f2;
}
.recordDia .record-model-flex .model-main .record-main .btns-group .record-status-btns .start-record {
  display: block;
  padding: 0;
  margin: 0;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  overflow: hidden;
  border: none;
  background-color: #f67276;
  text-align: center;
  font-size: 0;
}
.recordDia .record-model-flex .model-main .record-main .btns-group .record-status-btns .start-record .icon {
  width: 31px;
  height: 31px;
  -o-object-fit: contain;
     object-fit: contain;
}
.recordDia .record-model-flex .model-main .record-main .btns-group .record-status-btns .stop-record {
  padding: 0;
  margin: 0;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  overflow: hidden;
  border: none;
  background-color: #fff;
  text-align: center;
  font-size: 0;
}
.recordDia .record-model-flex .model-main .record-main .btns-group .record-status-btns .stop-record .icon {
  width: 31px;
  height: 31px;
  -o-object-fit: contain;
     object-fit: contain;
}
.recordDia .record-model-flex .model-main .record-main .btns-group .record-status-btns .listen-record {
  padding: 0;
  margin: 0;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  overflow: hidden;
  border: none;
  background-color: #fff;
  text-align: center;
  font-size: 0;
}
.recordDia .record-model-flex .model-main .record-main .btns-group .record-status-btns .listen-record .icon {
  width: 31px;
  height: 31px;
  -o-object-fit: contain;
     object-fit: contain;
}
.recordDia .close-zone {
  position: relative;
  z-index: 10;
  margin-top: -120px;
  height: 120px;
  text-align: center;
}
.recordDia .close-zone .close {
  margin-top: 30px;
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url(/res/images/youda-ico-close.png) center center no-repeat;
  background-size: 24px 24px;
  cursor: pointer;
}
.editting-container {
  background-color: #fff;
  overflow: hidden;
}
.editting-container .mod-header {
  position: relative;
  padding: 20px 15px 10px;
  text-align: center;
}
.editting-container .mod-header .title {
  font-size: 19px;
  font-weight: 500;
  color: #313131;
}
.editting-container .price-wrapper {
  margin: 18px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.editting-container .price-wrapper .text {
  font-size: 15px;
  color: #404040;
  line-height: 20px;
}
.editting-container .price-wrapper .price-main {
  margin: 0 5px;
  padding: 0 10px;
  width: 1.8rem;
  height: 35px;
  border-radius: 5px;
  background-color: #edf3f9;
  border: 1px solid #edf3f9;
  font-size: 15px;
  color: #404040;
  outline: none;
}
.editting-container .price-wrapper .price-main::-webkit-input-placeholder {
  color: #999999;
}
.editting-container .price-wrapper .price-main.focusing,
.editting-container .price-wrapper .price-main:focus {
  border: 1px solid rgba(83, 175, 242, 0.6);
  -webkit-box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
          box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
}
.editting-container .btn-wrapper {
  margin: 0 auto 44px;
  text-align: center;
}
.editting-container .btn-wrapper .submit-btn {
  width: 255px;
  height: 44px;
  border-radius: 5px;
  border: 1px solid #53aff2;
  background-color: #53aff2;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
}
.design-wrapper,
.intro-wrapper {
  position: relative;
}
.design-wrapper .design-zone,
.intro-wrapper .design-zone,
.design-wrapper .intro-zone,
.intro-wrapper .intro-zone {
  margin: 10px 15px 18px;
  padding: 7px 10px;
  border-radius: 5px;
  background-color: #edf3f9;
  border: solid 1px #e9e9e9;
}
.design-wrapper .design-zone.focusing,
.intro-wrapper .design-zone.focusing,
.design-wrapper .intro-zone.focusing,
.intro-wrapper .intro-zone.focusing {
  -webkit-box-shadow: 0 0 10px 1px rgba(83, 175, 242, 0.3);
          box-shadow: 0 0 10px 1px rgba(83, 175, 242, 0.3);
  border: solid 1px rgba(83, 175, 242, 0.8);
}
.design-wrapper .design-zone.error,
.intro-wrapper .design-zone.error,
.design-wrapper .intro-zone.error,
.intro-wrapper .intro-zone.error {
  -webkit-box-shadow: 0 0 10px 1px rgba(255, 76, 82, 0.35);
          box-shadow: 0 0 10px 1px rgba(255, 76, 82, 0.35);
  border: solid 1px rgba(255, 76, 82, 0.2);
}
.design-wrapper .design-zone .design-main,
.intro-wrapper .design-zone .design-main,
.design-wrapper .intro-zone .design-main,
.intro-wrapper .intro-zone .design-main {
  display: block;
  padding: 0;
  width: 100%;
  height: 45px;
  font-size: 15px;
  line-height: 20px;
  color: #404040;
  background-color: transparent;
}
.design-wrapper .design-zone .design-main::-webkit-input-placeholder,
.intro-wrapper .design-zone .design-main::-webkit-input-placeholder,
.design-wrapper .intro-zone .design-main::-webkit-input-placeholder,
.intro-wrapper .intro-zone .design-main::-webkit-input-placeholder {
  color: #999999;
}
.design-wrapper .design-zone .intro-main,
.intro-wrapper .design-zone .intro-main,
.design-wrapper .intro-zone .intro-main,
.intro-wrapper .intro-zone .intro-main {
  display: block;
  padding: 0;
  width: 100%;
  height: 65px;
  font-size: 15px;
  line-height: 20px;
  color: #404040;
  background-color: transparent;
}
.design-wrapper .design-zone .intro-main::-webkit-input-placeholder,
.intro-wrapper .design-zone .intro-main::-webkit-input-placeholder,
.design-wrapper .intro-zone .intro-main::-webkit-input-placeholder,
.intro-wrapper .intro-zone .intro-main::-webkit-input-placeholder {
  color: #999999;
}
.design-wrapper .design-zone .word-count,
.intro-wrapper .design-zone .word-count,
.design-wrapper .intro-zone .word-count,
.intro-wrapper .intro-zone .word-count {
  margin-top: 4px;
  text-align: right;
  font-size: 14px;
  color: #999999;
}
.my-info {
  margin: 10px 0;
  background-color: #fff;
  overflow: hidden;
}
.my-info .nav-block {
  padding: 0 25px 0 0;
  margin: 14px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: url(/res/images/youda-arr-r.png) right center no-repeat;
  background-size: 15px 15px;
}
.my-info .nav-block .avatar-zone {
  position: relative;
  width: 65px;
  min-width: 65px;
  margin-right: 10px;
}
.my-info .nav-block .avatar-zone .avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}
.my-info .nav-block .avatar-zone .icon-vip {
  display: none;
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 1;
  width: 24px;
  height: 24px;
}
.my-info .nav-block .avatar-zone .icon-vip .icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.my-info .nav-block .my-nickname {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #404040;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-info .nav-block .info-right-zone {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-right: 15px;
  overflow: hidden;
}
.my-info .nav-block .info-right-zone .user-name-zone {
  margin: 5px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}
.my-info .nav-block .info-right-zone .user-name-zone .name {
  margin-right: 7px;
  font-size: 18px;
  font-weight: 500;
  line-height: 18px;
  text-align: left;
  color: #191919;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-info .nav-block .info-right-zone .user-name-zone .icon-tag {
  min-width: 56px;
  height: 18px;
  padding: 1px 5px;
  border-radius: 100px;
  background-color: #c8c8c8;
  background-image: -webkit-gradient(linear, left top, right top, from(#e4e4e4), to(#c8c8c8));
  background-image: linear-gradient(to right, #e4e4e4, #c8c8c8);
  font-size: 10px;
  text-align: center;
  line-height: 16px;
  color: #7c7c7c;
}
.my-info .nav-block .info-right-zone .user-intro {
  font-size: 12px;
  line-height: 24px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-info .nav-block.vip .avatar-zone .icon-vip {
  display: block;
}
.my-info .nav-block.vip .info-right-zone .user-name-zone .icon-tag {
  background-color: #e6c350;
  background-image: -webkit-gradient(linear, left top, right top, from(#f4d87a), to(#e6c350));
  background-image: linear-gradient(to right, #f4d87a, #e6c350);
  color: #67370f;
}
.mytab-menu-list {
  margin: 10px 0;
  background-color: #fff;
}
.mytab-menu-list .item {
  overflow: hidden;
}
.mytab-menu-list .item .nav-block {
  margin: 0 0 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mytab-menu-list .item .nav-block .icon {
  display: block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 24px 24px;
}
.mytab-menu-list .item .nav-block .icon.icon-joinin {
  background-image: url(/res/images/lv-ico-myjoin.png);
}
.mytab-menu-list .item .nav-block .icon.icon-follow {
  background-image: url(/res/images/lv-ico-myfollow.png);
}
.mytab-menu-list .item .nav-block .icon.icon-money {
  background-image: url(/res/images/lv-ico-mymoney.png);
}
.mytab-menu-list .item .nav-block .icon.icon-gifts {
  background-image: url(/res/images/lv-ico-mygifts.png);
}
.mytab-menu-list .item .nav-block .icon.icon-teachlist {
  background-image: url(/res/images/lv-ico-teachlives.png);
}
.mytab-menu-list .item .nav-block .icon.icon-manage {
  background-image: url(/res/images/lv-ico-manage.png);
}
.mytab-menu-list .item .nav-block .icon.icon-earnings {
  background-image: url(/res/images/lv-ico-earnings.png);
}
.mytab-menu-list .item .nav-block .icon.icon-myyouda {
  background-image: url(/res/images/lv-ico-myyouda.png);
}
.mytab-menu-list .item .nav-block .icon.icon-mylistened {
  background-image: url(/res/images/lv-ico-mylistened.png);
}
.mytab-menu-list .item .nav-block .icon.icon-myquize {
  background-image: url(/res/images/lv-ico-myquioze.png);
}
.mytab-menu-list .item .nav-block .icon.icon-myvip {
  background-image: url(/res/images/lv-ico-myvip.png);
}
.mytab-menu-list .item .nav-block .i-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 55px;
  line-height: 55px;
  font-size: 15px;
  color: #404040;
}
.mytab-menu-list .item .nav-block .i-main .text {
  margin-right: 15px;
  padding-right: 25px;
  background: url(/res/images/youda-arr-r.png) right center no-repeat;
  background-size: 15px 15px;
}
.mytab-menu-list .item:not(:last-child) .nav-block .i-main {
  position: relative;
  border-bottom: 1px solid #f2f2f2;
}
.mytab-menu-list .item.undispos .nav-block .i-main .text {
  position: relative;
}
.mytab-menu-list .item.undispos .nav-block .i-main .text::after {
  content: '';
  display: block;
  position: absolute;
  right: 25px;
  top: 50%;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border: 1px solid #fff;
  border-radius: 505px;
  background-color: #f67276;
}
.myinfo-tablist {
  margin: 10px 0;
  background-color: #fff;
  overflow: hidden;
}
.myinfo-tablist .item {
  margin: 0 15px;
  padding: 15px 25px 15px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: url(/res/images/youda-arr-r.png) right center no-repeat;
  background-size: 15px 15px;
  cursor: pointer;
}
.myinfo-tablist .item:not(:last-child) {
  position: relative;
  border-bottom: 1px solid #f2f2f2;
}
.myinfo-tablist .item > .text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 15px;
  font-weight: 500;
  line-height: 20xp;
  color: #313131;
}
.myinfo-tablist .item .avatar-zone {
  width: 65px;
  height: 65px;
  overflow: hidden;
}
.myinfo-tablist .item .avatar-zone > .avatar {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}
.myinfo-tablist .item .name-zone {
  max-width: 60%;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amend-info-dialog {
  position: fixed;
  display: block;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}
.amend-info-dialog .dialog-main {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
  width: 80%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 5px;
}
.amend-info-dialog .dialog-main .dialog-content {
  padding: 20px 12px 0;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
  color: #404040;
}
.amend-info-dialog .dialog-main .dialog-content .title {
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
  margin: 0 0 20px 0;
}
.amend-info-dialog .dialog-main .dialog-content .text {
  margin: 0 0 20px 0;
  line-height: 20px;
  text-align: left;
  color: #999999;
}
.amend-info-dialog .dialog-main .dialog-content .textarea-zone {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.amend-info-dialog .dialog-main .dialog-content .textarea-zone .textarea-label {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  line-height: 22px;
  color: #404040;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.amend-info-dialog .dialog-main .dialog-content .textarea-zone .textarea-control {
  width: 100%;
  padding: 11px 15px;
  height: 44px;
  border-radius: 5px;
  background-color: #edf3f9;
  border: 1px solid #edf3f9;
  font-size: 15px;
  line-height: 20px;
  color: #404040;
  overflow: auto;
  overflow-x: hidden;
  -webkit-appearance: none;
}
.amend-info-dialog .dialog-main .dialog-content .textarea-zone .textarea-control::-webkit-input-placeholder {
  color: #999999;
}
.amend-info-dialog .dialog-main .dialog-content .textarea-zone .textarea-control:-ms-input-placeholder {
  color: #999999;
}
.amend-info-dialog .dialog-main .dialog-content .textarea-zone .textarea-control::-ms-input-placeholder {
  color: #999999;
}
.amend-info-dialog .dialog-main .dialog-content .textarea-zone .textarea-control::placeholder {
  color: #999999;
}
.amend-info-dialog .dialog-main .dialog-content .textarea-zone .textarea-control.focusing,
.amend-info-dialog .dialog-main .dialog-content .textarea-zone .textarea-control:focus {
  border: 1px solid rgba(83, 175, 242, 0.6);
  -webkit-box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
          box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
}
.amend-info-dialog .dialog-main .dialog-content .input-zone {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.amend-info-dialog .dialog-main .dialog-content .input-zone .textarea-label {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  line-height: 22px;
  color: #404040;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.amend-info-dialog .dialog-main .dialog-content .input-zone .textarea-control {
  width: 100%;
  padding: 11px 15px;
  height: 44px;
  border-radius: 5px;
  background-color: #edf3f9;
  border: 1px solid #edf3f9;
  font-size: 15px;
  line-height: 20px;
  color: #404040;
  overflow: auto;
  overflow-x: hidden;
  -webkit-appearance: none;
}
.amend-info-dialog .dialog-main .dialog-content .input-zone .textarea-control::-webkit-input-placeholder {
  color: #999999;
}
.amend-info-dialog .dialog-main .dialog-content .input-zone .textarea-control:-ms-input-placeholder {
  color: #999999;
}
.amend-info-dialog .dialog-main .dialog-content .input-zone .textarea-control::-ms-input-placeholder {
  color: #999999;
}
.amend-info-dialog .dialog-main .dialog-content .input-zone .textarea-control::placeholder {
  color: #999999;
}
.amend-info-dialog .dialog-main .dialog-content .input-zone .textarea-control.focusing,
.amend-info-dialog .dialog-main .dialog-content .input-zone .textarea-control:focus {
  border: 1px solid rgba(83, 175, 242, 0.6);
  -webkit-box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
          box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
}
.amend-info-dialog .dialog-main .dialog-content .amend-avatar-zone {
  width: 105px;
  height: 105px;
  margin: 0 auto 10px;
  overflow: hidden;
}
.amend-info-dialog .dialog-main .dialog-content .amend-avatar-zone .avatar {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.amend-info-dialog .dialog-main .dialog-content .amend-livecover-zone {
  width: 220px;
  height: 130px;
  margin: 0 auto 10px;
  overflow: hidden;
}
.amend-info-dialog .dialog-main .dialog-content .amend-livecover-zone .avatar {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.amend-info-dialog .dialog-main .dialog-content .upload-btn {
  margin-bottom: 10px;
  padding: 5px 20px 15px;
  font-size: 15px;
  color: #878787;
  background-color: transparent;
  border: none;
}
.amend-info-dialog .dialog-main .dialog-footer {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
}
.amend-info-dialog .dialog-main .dialog-footer > a {
  display: block;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  border-top: 1px solid #f2f2f2;
  font-size: 15px;
  text-align: center;
  padding: 14px 10px;
}
.amend-info-dialog .dialog-main .dialog-footer > a:not(:last-child) {
  border-right: 1px solid #f2f2f2;
}
.amend-info-dialog .dialog-main .dialog-footer .dialog-cancel-btn {
  color: #999999;
}
.amend-info-dialog .dialog-main .dialog-footer .dialog-confirm-btn {
  color: #108ee9;
}
.amend-info-dialog.bscroll .dialog-main .dialog-content {
  height: 400px;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.amend-info-dialog.bscroll .dialog-main .dialog-footer {
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 432px) {
  .amend-info-dialog.bscroll .dialog-main .dialog-content {
    height: 600px;
  }
}
.my-answer-title {
  margin: 12px 15px;
  font-size: 15px;
  line-height: 20px;
  color: #999999;
}
.profits-pro {
  margin: 0 0 10px 0;
  padding: 35px 15px;
  background-color: #fff;
  position: relative;
  text-align: center;
}
.profits-pro .pro-text {
  margin-bottom: 7px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: #404040;
}
.profits-pro .pro-number-zone {
  min-height: 67px;
  line-height: 67px;
  font-size: 48px;
  font-weight: normal;
  color: #404040;
}
.profits-pro .withdraw-log-tip {
  margin-top: 5px;
  font-size: 10px;
  color: #f57276;
}
.profits-pro .withdrawal-record {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  padding: 10px 15px;
}
.profits-details {
  margin: 10px 0;
}
.profits-details .details-list {
  padding: 10px 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
}
.profits-details .details-list .item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
}
.profits-details .details-list .item:not(:last-child) {
  border-right: 1px solid #f2f2f2;
}
.profits-details .details-list .item .text {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #999999;
}
.profits-details .details-list .item .num {
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  color: #404040;
}
.profits-details .profits-tip-text {
  margin: 10px 15px;
  font-size: 12px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-main-zone {
  background-color: #fff;
}
.tab-main-zone .tab-list {
  padding: 0 15px;
}
.tab-main-zone .tab-list .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 20px;
  height: 44px;
  line-height: 44px;
  font-size: 15px;
  color: #999999;
  background: url(/res/images/arr_light.png) right center no-repeat;
  background-size: 7px 12px;
  cursor: pointer;
}
.tab-main-zone .tab-list .item .i-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 15px;
  color: #999999;
}
.tab-main-zone .tab-list .item .i-right-num {
  color: #404040;
}
.withdraw-zone {
  margin: 100px 15px 60px;
  text-align: center;
}
.withdraw-zone .withdraw-text {
  font-size: 12px;
  color: #999999;
  margin-bottom: 15px;
}
.withdraw-zone .btn {
  width: 5.1rem;
  min-width: 200px;
  max-width: 350px;
  height: 44px;
  border-radius: 5px;
  background-color: #53aff2;
  border: solid 1px #53aff2;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
}
.withdraw-zone .btn[disabled="disabled"],
.withdraw-zone .btn.disabled {
  background-color: #999999;
  border: solid 1px #999999;
  color: #f4f6f8;
}
.order-details-dialog {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  z-index: 1010;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}
.order-details-dialog .fixed-main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  max-width: 640px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.order-details-dialog .fixed-main .details-wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background-color: #f4f6f8;
}
.order-details-dialog .fixed-main .details-wrapper .pur-list {
  margin-bottom: 10px;
}
.order-details-dialog .fixed-main .details-wrapper .pur-list .item:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.order-details-dialog .fixed-main .details-wrapper .will-pro {
  height: 44px;
  line-height: 44px;
  padding: 0 15px;
  background-color: #fff;
  font-size: 15px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-details-dialog .fixed-main .details-wrapper .will-pro .num-zone {
  color: #313131;
}
.order-details-dialog .fixed-main .details-wrapper .m-loading {
  margin: 10px 0;
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.order-details-dialog .fixed-main .details-wrapper .m-loading .text {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
}
.order-details-dialog .fixed-main .close-zone {
  position: relative;
  height: 20%;
  text-align: center;
}
.order-details-dialog .fixed-main .close-zone .close {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 1;
  margin: -22px 0 0 -22px;
  display: inline-block;
  width: 44px;
  height: 44px;
  background: url(/res/images/lv-ico-close1.png) center center no-repeat;
  background-size: 35px 35px;
}
.order-details-dialog .details-main .details-list {
  background-color: #fff;
}
.order-details-dialog .details-main .details-list .item:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.order-details-dialog .details-main .details-list .item .i-surface {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.order-details-dialog .details-main .details-list .item .i-surface .time-zone {
  width: 50px;
  text-align: center;
}
.order-details-dialog .details-main .details-list .item .i-surface .time-zone .day {
  font-size: 14px;
  color: #898f9c;
  line-height: 14px;
}
.order-details-dialog .details-main .details-list .item .i-surface .time-zone .hour {
  font-size: 11px;
  color: #898f9c;
}
.order-details-dialog .details-main .details-list .item .i-surface .info-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-left: 10px;
  overflow: hidden;
}
.order-details-dialog .details-main .details-list .item .i-surface .info-main .avatar-zone {
  float: left;
  margin-right: 10px;
  width: 36px;
  height: 36px;
  overflow: hidden;
}
.order-details-dialog .details-main .details-list .item .i-surface .info-main .avatar-zone .avrtar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.order-details-dialog .details-main .details-list .item .i-surface .info-main .name {
  min-height: 20px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  color: #4a4a4a;
}
.order-details-dialog .details-main .details-list .item .i-surface .info-main .desc {
  min-height: 16px;
  font-size: 12px;
  line-height: 16px;
  color: #898f9c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-details-dialog .details-main .details-list .item .i-surface .statistics {
  margin-left: 10px;
  text-align: right;
}
.order-details-dialog .details-main .details-list .item .i-surface .statistics .number-zone {
  font-size: 10px;
  color: #404040;
  white-space: nowrap;
}
.order-details-dialog .details-main .details-list .item .i-surface .statistics .number-zone .num {
  font-size: 18px;
}
.order-details-dialog .details-main .details-list .item .i-surface .statistics .status {
  font-size: 12px;
  line-height: 16px;
  color: #898f9c;
}
.order-details-dialog .details-main .details-list .item .i-surface .statistics .status.wait {
  color: #f57276;
}
.order-details-dialog .details-main .details-list .item .i-surface .ico-arr {
  margin-left: 10px;
  display: block;
  width: 15px;
  height: 15px;
}
.order-details-dialog .details-main .details-list .item .i-inner {
  display: none;
  padding: 0 15px;
  background-color: #f2f2f2;
}
.order-details-dialog .details-main .details-list .item .i-inner .inner-list .item {
  margin-left: 50px;
  padding-right: 25px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.order-details-dialog .details-main .details-list .item .i-inner .inner-list .item:not(:last-child) {
  border-bottom: 1px solid #fff;
}
.order-details-dialog .details-main .details-list .item .i-inner .inner-list .item .i-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  padding-left: 50px;
  font-size: 15px;
  color: #878787;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-details-dialog .details-main .details-list .item .i-inner .inner-list .item .i-main::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 3px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background-color: #d8d8d8;
}
.order-details-dialog .details-main .details-list .item .i-inner .inner-list .item .i-right {
  font-size: 15px;
  color: #878787;
}
.order-details-dialog .details-main .details-list .item .i-inner .inner-list .item.count {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-details-dialog .details-main .details-list .item .i-inner .inner-list .item.count .text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 15px;
  color: #878787;
}
.order-details-dialog .details-main .details-list .item.on .i-surface .ico-arr {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.order-details-dialog .details-main .not-list-main {
  margin: 80px auto;
}
.order-details-dialog .lvmd-income-list {
  margin: 0 15px;
}
.order-details-dialog .lvmd-income-list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f2f2f2;
}
.order-details-dialog .lvmd-income-list > li .incomer-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
}
.order-details-dialog .lvmd-income-list > li .incomer-info .incomer-pic {
  float: left;
  margin-right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.order-details-dialog .lvmd-income-list > li .incomer-info .incomer-pic1 {
  float: left;
  margin-right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  overflow: hidden;
}
.order-details-dialog .lvmd-income-list > li .incomer-info .nickname {
  line-height: 20px;
  min-height: 20px;
  font-size: 14px;
  color: #404040;
}
.order-details-dialog .lvmd-income-list > li .incomer-info .income-time {
  font-size: 10px;
  color: #999999;
  font-weight: 300;
}
.order-details-dialog .lvmd-income-list > li .money-num {
  padding-left: 20px;
  line-height: 36px;
  background: url(/res/images/live-ico-money.png) 0 center no-repeat;
  background-size: 15px auto;
}
.order-details-dialog .lvmd-income-list > li .get-status {
  font-size: 16px;
  font-weight: 500;
  color: #999999;
}
.order-details-dialog .lvmd-income-list > li .withdraw-status {
  font-size: 16px;
  font-weight: 500;
  color: #404040;
}
.order-details-dialog .lvmd-income-list > li .withdraw-status.pass {
  color: #5cb600;
}
.order-details-dialog .lvmd-income-list > li .withdraw-status.not-pass {
  color: #ff0000;
}
.withdraw-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1020;
}
.withdraw-dialog .withdraw-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
}
.withdraw-dialog .dialog-main {
  width: 89.33333333%;
  max-width: 400px;
  height: 362px;
  border-radius: 5px;
  background-color: #ffffff;
}
.withdraw-dialog .dialog-main .dialog-header {
  height: 60px;
  border-radius: 5px;
  background-color: #f2f2f2;
}
.withdraw-dialog .dialog-main .dialog-header .title {
  text-align: center;
  line-height: 60px;
  font-weight: 500;
  font-size: 15px;
  color: #404040;
}
.withdraw-dialog .dialog-main .dialog-body {
  padding: 20px 20px 30px;
  text-align: center;
}
.withdraw-dialog .dialog-main .dialog-body .withdraw-tit {
  margin-bottom: 20px;
  font-size: 15px;
  color: #404040;
  line-height: 20px;
  font-weight: 400;
  text-align: left;
}
.withdraw-dialog .dialog-main .dialog-body .form-control-zone {
  margin-bottom: 15px;
  height: 60px;
  line-height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid #ededed;
  overflow: hidden;
}
.withdraw-dialog .dialog-main .dialog-body .form-control-zone .ico {
  margin-right: 15px;
  font-size: 30px;
  line-height: 1.0;
  color: #999999;
}
.withdraw-dialog .dialog-main .dialog-body .form-control-zone .form-control-num {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: transparent;
  border: none;
  height: 60px;
  font-size: 50px;
  color: #404040;
  outline: none;
  -webkit-appearance: none;
}
.withdraw-dialog .dialog-main .dialog-body .form-control-zone .form-control-num::input-placeholder {
  color: #999999;
}
.withdraw-dialog .dialog-main .dialog-body .withdraw-text-zone {
  text-align: left;
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
  color: #999999;
}
.withdraw-dialog .dialog-main .dialog-body .withdraw-btn {
  margin: 40px 0 15px;
  width: 255px;
  height: 44px;
  border-radius: 5px;
  background-color: #53aff2;
  border: solid 1px #53aff2;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
}
.withdraw-dialog .dialog-main .dialog-body .tip-text {
  font-size: 13px;
  color: #898f9c;
}
/* 我的活动号列表 */
.myaccount {
  background-color: #f4f6f8;
}
.myaccount .myaccount-title {
  height: 49px;
  line-height: 49px;
  text-align: center;
  background-color: #29a1f7;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}
.myaccount .myaccount-list {
  background-color: #fff;
}
.myaccount .myaccount-list > .item {
  border-bottom: 1px solid #f2f2f2;
}
.myaccount .myaccount-list.create {
  margin-bottom: 10px;
}
.myaccount .item-account {
  display: block;
  padding: 15px;
}
.myaccount .item-account .a-cover-zone {
  float: left;
  min-width: 60px;
  width: 60px;
  height: 60px;
}
.myaccount .item-account .a-cover-zone .a-coverimg {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.myaccount .item-account .a-main {
  float: left;
  display: block;
  margin-left: .3rem;
  height: 60px;
  max-width: 60%;
}
.myaccount .item-account .a-main .a-name {
  margin: 5px 0 9px 0;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #404040;
}
.myaccount .item-account .a-main .a-followed {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: #999999;
}
.myaccount .item-account .a-connet {
  margin-top: 8px;
  float: right;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: #999999;
}
.myaccount .create-zone {
  margin: 20px auto 40px;
  text-align: center;
}
.myaccount .create-zone .turn-btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 15px;
  line-height: 20px;
  background-color: #29a1f7;
  border-radius: 5px;
  color: #fff;
}
.myaccount .create-btn {
  margin: 40px auto;
}
.back-center-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  z-index: 100;
}
.back-center-box > .turn-btn {
  position: absolute;
  bottom: 120px;
  right: 0;
  z-index: 10;
  display: block;
  padding: 10px 5px 10px 26px;
  border-radius: 100px 0 0 100px;
  background: rgba(41, 161, 247, 0.3) url(/res/images/live-on.png) 7px center no-repeat;
  background-size: 13px auto;
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: #fff;
}
.back-center-box > .turn-btn.left {
  right: auto;
  left: 0;
  padding: 10px 26px 10px 5px;
  border-radius: 0 100px 100px 0;
  background: rgba(41, 161, 247, 0.3) url(/res/images/live-off.png) 89% center no-repeat;
  background-size: 13px auto;
}
.menubar-controller {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  font-size: 0;
  text-align: center;
  border-bottom: 1px solid #f4f6f8;
}
.menubar-controller > .item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 35%;
  font-size: 16px;
}
.menubar-controller > .item .block-navgat {
  position: relative;
  display: block;
  line-height: 48px;
  color: #999999;
}
.menubar-controller > .item.active .block-navgat {
  color: #108ee9;
}
.menubar-controller > .item.active .block-navgat::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 3px;
  border-radius: 2px;
  background-color: #108ee9;
}
.nav-menubar-zone.fixed-top {
  height: 49px;
}
.nav-menubar-zone.fixed-top .menubar-controller {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  max-width: 640px;
  margin: auto;
}
.pagehome-wrapper .pagehome-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 15px;
  height: 48px;
}
.pagehome-wrapper .pagehome-header .pagehome-title {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #999999;
  line-height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pagehome-wrapper .pagehome-header .right-btn {
  display: block;
  margin-left: 15px;
  padding: 10px 0 10px 10px;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  font-size: 13px;
  line-height: 20px;
  color: #108ee9;
  vertical-align: middle;
  outline: none;
}
.accounts-list {
  background-color: #fff;
  overflow: hidden;
}
.accounts-list .item {
  position: relative;
  padding: .36rem .24rem .24rem .48rem;
}
.accounts-list .item:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.accounts-list .item .block-navgat {
  display: block;
  position: relative;
  z-index: 1;
}
.accounts-list .item .account-main {
  margin-right: 80px;
}
.accounts-list .item .account-main .cover-zone {
  float: left;
  width: 1.44rem;
  height: 1.44rem;
}
.accounts-list .item .account-main .cover-zone .cover-img {
  width: 1.44rem;
  height: 1.44rem;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.accounts-list .item .account-main .account-info {
  margin-left: 1.74rem;
  min-height: 1.44rem;
}
.accounts-list .item .account-main .account-info .a-name {
  font-size: 15px;
  color: #404040;
  line-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accounts-list .item .account-main .account-info .a-desc {
  font-size: 14px;
  color: #999999;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accounts-list .item .follow-btn {
  position: absolute;
  right: .24rem;
  top: 0;
  bottom: 0;
  z-index: 0;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 12px;
  height: 36px;
  border: 1px solid #ccc;
  background-color: transparent;
  border-radius: 100px;
  font-size: 12px;
  color: #ccc;
  cursor: pointer;
  outline: none;
}
.accounts-list .item .follow-zone {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  height: 36px;
  line-height: 36px;
  padding-left: 20px;
  background: url(/res/images/lv-ico-myfollow.png) left center no-repeat;
  background-size: 18px 18px;
  font-size: 10px;
  color: #999999;
}
.slider-button {
  position: absolute;
  right: 6px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 10;
  width: 35px;
  display: block;
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
}
.slider-button .icon-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  font-size: 18px;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border-top-right-radius: 4px;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 10px #ccc;
          box-shadow: 0 2px 10px #ccc;
  text-align: center;
  border: 3px solid #ececec;
  color: #f7aa1c;
}
.slider-button .icon-wrap .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 2px;
  -webkit-animation: shareCardShake linear 4s infinite;
          animation: shareCardShake linear 4s infinite;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.slider-button .label-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  overflow: hidden;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  white-space: nowrap;
}
.slider-button .label-wrap label {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding-left: 15px;
  padding-right: 20px;
  background-color: rgba(240, 240, 240, 0.8);
  color: #666;
  font-size: 12px;
  top: 0;
  border-top-left-radius: 27px;
  border-bottom-left-radius: 27px;
  line-height: 30px;
  -webkit-box-shadow: 0 2px 7px rgba(102, 102, 102, 0.4);
          box-shadow: 0 2px 7px rgba(102, 102, 102, 0.4);
  -webkit-animation: shareCardLabel ease-out 0.3s;
          animation: shareCardLabel ease-out 0.3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  cursor: pointer;
}
/* 赠礼中心 - 券 */
.gifts-ticket {
  padding: 20px 30px;
}
.gifts-ticket .gt-header {
  text-align: center;
}
.gifts-ticket .gt-header .o-pic {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin: 0 auto;
}
.gifts-ticket .gt-header .tit {
  margin: 6px 0;
  font-size: 18px;
  font-weight: 500;
  color: #404040;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gifts-ticket .gt-header .tip {
  text-align: center;
  font-size: 15px;
  color: #ff4c52;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gifts-ticket .gt-header .owner-view {
  margin-bottom: 12px;
}
.gifts-ticket .gt-header .success-view {
  display: none;
}
.gifts-ticket .gt-ticket-zone {
  border-radius: 10px 10px 0 0;
}
.gifts-ticket .gt-ticket-zone .gtz-hd {
  position: relative;
  z-index: 1;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px 10px 0 0;
  background-color: #ff4c52;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  line-height: 44px;
}
.gifts-ticket .gt-ticket-zone .gtz-bd {
  position: relative;
  z-index: 0;
  padding: 0 0 25px 0;
  border: 1px solid transparent;
  background: url(/res/images/gtz-bd-bg.png) center center no-repeat;
  background-size: 107% auto;
}
.gifts-ticket .gt-ticket-zone .gtz-bd .g-coverimg {
  display: block;
  margin: 20px auto 45px;
  width: 2.7rem;
  height: 1.6rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.gifts-ticket .gt-ticket-zone .gtz-bd .g-info {
  text-align: center;
}
.gifts-ticket .gt-ticket-zone .gtz-bd .g-info .title {
  margin: 0 14px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.44;
  text-align: center;
  color: #404040;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gifts-ticket .gt-ticket-zone .gtz-bd .g-info .speaker {
  margin: 9px 0 4px 0;
  color: #999999;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.73;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gifts-ticket .gt-ticket-zone .gtz-bd .g-info .time {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.73;
  color: #999999;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gifts-ticket .gt-ticket-zone .gtz-bd.paid {
  position: relative;
}
.gifts-ticket .gt-ticket-zone .gtz-bd.paid::before {
  content: '';
  width: 1.6rem;
  height: 1.4rem;
  position: absolute;
  right: 8px;
  bottom: 17px;
  z-index: -1;
  background: url(/res/images/live-givepaid.png) center center no-repeat;
  background-size: 1.6rem 1.4rem;
}
.gifts-ticket .gt-ticket-zone .gtz-bd.success {
  position: relative;
}
.gifts-ticket .gt-ticket-zone .gtz-bd.success::before {
  content: '';
  width: 1.6rem;
  height: 1.4rem;
  position: absolute;
  right: 8px;
  bottom: 17px;
  z-index: -1;
  background: url(/res/images/live-givesuc.png) center center no-repeat;
  background-size: 1.6rem 1.4rem;
}
.gifts-ticket .default-btn {
  margin: 20px 0;
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  background-color: #29a1f7;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.gifts-ticket .default-btn.disabled,
.gifts-ticket .default-btn[disabled=disabled] {
  background-color: #e5e5e5;
  color: #fff;
}
.gifts-ticket .check-getlist {
  display: inline-block;
  margin: 0 4px;
  font-size: 15px;
  color: #108ee9;
  text-align: center;
}
.gifts-ticket .self-adopt-btn {
  display: inline-block;
  margin: 0 4px;
  font-size: 15px;
  color: #999999;
  text-align: center;
  text-decoration: underline;
}
.gifts-ticket .receiver-view {
  text-align: center;
}
.gifts-ticket .receiver-view .success-tip {
  font-size: 15px;
  color: #999999;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 个人礼包中心 */
.ticket-gifts-list {
  background-color: #fff;
  overflow: hidden;
}
.ticket-gifts-list > .item {
  padding: 15px;
}
.ticket-gifts-list > .item:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.ticket-gifts-list .item-gift {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.ticket-gifts-list .item-gift .cover-zone {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 135px;
          flex: 0 0 135px;
  min-width: 135px;
  height: 80px;
  overflow: hidden;
}
.ticket-gifts-list .item-gift .cover-zone .g-coverimg {
  width: 135px;
  height: 80px;
  -o-object-fit: cover;
     object-fit: cover;
}
.ticket-gifts-list .item-gift .g-main {
  margin: 0 0 0 10px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.ticket-gifts-list .item-gift .g-main .g-title {
  height: 40px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #404040;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ticket-gifts-list .item-gift .g-main .g-pro-bar {
  width: 100%;
  margin: .16rem 0;
  position: relative;
  height: .16rem;
  overflow: hidden;
  border-radius: 100px;
  background-color: #f2f2f2;
}
.ticket-gifts-list .item-gift .g-main .g-pro-bar > .pro {
  position: absolute;
  height: 100%;
  border-radius: 100px;
  background-color: #ff4c52;
}
.ticket-gifts-list .item-gift .g-main .g-over-zone {
  margin: .08rem 0;
  font-size: 12px;
  line-height: .24rem;
  color: #999999;
  font-weight: 300;
}
.ticket-gifts-list .item-gift .g-main .g-gifts-num {
  font-size: 12px;
  line-height: 1.17;
  color: #999999;
}
.ticket-gifts-list .item-gift .g-main .g-gifts-num .surplus {
  color: #ff4c52;
}
.order-details-list {
  background-color: #fff;
}
.order-details-list .item:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.order-details-list .item .i-surface {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.order-details-list .item .i-surface .time-zone {
  width: 50px;
  text-align: center;
}
.order-details-list .item .i-surface .time-zone .day {
  font-size: 14px;
  color: #898f9c;
  line-height: 14px;
}
.order-details-list .item .i-surface .time-zone .hour {
  font-size: 11px;
  color: #898f9c;
}
.order-details-list .item .i-surface .info-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-left: 10px;
  overflow: hidden;
}
.order-details-list .item .i-surface .info-main .avatar-zone {
  float: left;
  margin-right: 10px;
  width: 36px;
  height: 36px;
  overflow: hidden;
}
.order-details-list .item .i-surface .info-main .avatar-zone .avrtar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.order-details-list .item .i-surface .info-main .name {
  min-height: 20px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  color: #4a4a4a;
}
.order-details-list .item .i-surface .info-main .desc {
  min-height: 16px;
  font-size: 12px;
  line-height: 16px;
  color: #898f9c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-details-list .item .i-surface .statistics {
  margin-left: 10px;
  text-align: right;
}
.order-details-list .item .i-surface .statistics .number-zone {
  font-size: 10px;
  color: #404040;
  white-space: nowrap;
}
.order-details-list .item .i-surface .statistics .number-zone .num {
  font-size: 18px;
}
.order-details-list .item .i-surface .statistics .status {
  font-size: 12px;
  line-height: 16px;
  color: #898f9c;
}
.order-details-list .item .i-surface .statistics .status.wait {
  color: #f57276;
}
.order-details-list .item .i-surface .ico-arr {
  margin-left: 10px;
  display: block;
  width: 15px;
  height: 15px;
}
.order-details-list .item .i-inner {
  display: none;
  padding: 0 15px;
  background-color: #f2f2f2;
}
.order-details-list .item .i-inner .inner-list .item {
  margin-left: 50px;
  padding-right: 25px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.order-details-list .item .i-inner .inner-list .item:not(:last-child) {
  border-bottom: 1px solid #fff;
}
.order-details-list .item .i-inner .inner-list .item .i-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  padding-left: 50px;
  font-size: 15px;
  color: #878787;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-details-list .item .i-inner .inner-list .item .i-main::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 3px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background-color: #d8d8d8;
}
.order-details-list .item .i-inner .inner-list .item .i-right {
  font-size: 15px;
  color: #878787;
}
.order-details-list .item .i-inner .inner-list .item.count {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-details-list .item .i-inner .inner-list .item.count .text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 15px;
  color: #878787;
}
.order-details-list .item.on .i-surface .ico-arr {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.lv-ticket-header {
  position: relative;
  height: 150px;
  overflow: hidden;
}
.lv-ticket-header .cover-img {
  width: 100%;
  height: 150px;
  -o-object-fit: cover;
     object-fit: cover;
}
.lv-ticket-body {
  position: relative;
  z-index: 1;
  min-height: 300px;
  padding: 15px;
  margin-top: -30px;
}
.lv-ticket-body .lv-ticket-main {
  background-color: #fff;
  border-radius: 7px 7px 0 0;
}
.lv-ticket-body .lv-info {
  padding: 20px;
  margin: 0 20px;
  border-bottom: 1px solid #f2f2f2;
  text-align: center;
}
.lv-ticket-body .lv-info .lv-title {
  font-size: 18px;
  line-height: 25px;
  color: #404040;
}
.lv-ticket-body .lv-info .lv-teacher {
  margin: 9px 0 4px 0;
  color: #999999;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lv-ticket-body .lv-info .lv-star-time {
  margin: 9px 0 4px 0;
  color: #999999;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lv-ticket-body .lv-info .lv-hots {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 12px;
  line-height: 24px;
  font-weight: 500;
  color: #e65343;
  vertical-align: middle;
}
.lv-ticket-body .lv-info .lv-hots .icon {
  margin-right: 5px;
  width: 24px;
  vertical-align: middle;
}
.lv-ticket-body .lv-info .receiver-btn {
  display: block;
  margin: 10px auto;
  padding: 10px;
  width: 100%;
  height: 40px;
  line-height: 20px;
  background-color: #e65343;
  border: none;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
  color: #fff;
}
.lv-ticket-body .lv-info .receiver-btn[disabled="disabled"] {
  background-color: #ededed;
}
.lv-ticket-body .lv-info .btn {
  padding: 6px 12px;
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  font-size: 13px;
}
.lv-ticket-body .notice-list .item {
  position: relative;
  margin-bottom: 5px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 20px;
  color: #999999;
}
.lv-ticket-body .notice-list .item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #999999;
}
.ticket-model {
  margin: 10px 20px;
  padding-bottom: 15px;
}
.ticket-model:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.ticket-model .mod-title {
  position: relative;
  height: 24px;
  margin-bottom: 10px;
  padding-left: 15px;
  line-height: 24px;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
}
.ticket-model .mod-title::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  z-index: 1;
  display: block;
  width: 4px;
  height: 14px;
  background-color: #ff4c52;
}
.present-gift-zone .present-info .avatar-zone {
  float: left;
  width: 32px;
  height: 32px;
}
.present-gift-zone .present-info .avatar-zone .avatar {
  width: 32px;
  height: 32px;
  border: 2px solid #f4f6f8;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.present-gift-zone .present-info .pres-user-name {
  margin-left: 40px;
  display: block;
  font-size: 15px;
  line-height: 30px;
  color: #404040;
}
.present-gift-zone .present-content {
  margin: 5px 0 0 40px;
  font-size: 13px;
  color: #404040;
  line-height: 20px;
}
.present-gift-zone1 .present-content {
  margin: 5px 10px;
  font-size: 13px;
  color: #404040;
  line-height: 20px;
}
.present-gift-zone1 .present-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.present-gift-zone1 .present-info .avatar-zone {
  float: left;
  width: 32px;
  height: 32px;
}
.present-gift-zone1 .present-info .avatar-zone .avatar {
  width: 32px;
  height: 32px;
  border: 2px solid #f4f6f8;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.present-gift-zone1 .present-info .pres-user-name {
  margin-left: 10px;
  display: block;
  font-size: 15px;
  line-height: 30px;
  color: #404040;
}
.show-buyvip-wrapper {
  margin: 10px 0;
}
.show-buyvip-wrapper .navgation {
  position: relative;
  display: block;
  margin: 0 auto;
}
.show-buyvip-wrapper .arr {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  margin: auto;
  width: 40px;
  height: 40px;
  background: transparent url(/res/images/icon-arr_2@24x24.png) center center no-repeat;
  background-size: 24px;
  -webkit-animation: arrRight 1s ease-out 1s infinite;
          animation: arrRight 1s ease-out 1s infinite;
}
@-webkit-keyframes arrRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
}
@keyframes arrRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
}
.room-footer-bar {
  position: relative;
  z-index: 102;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  background-color: #fff;
}
.room-footer-bar .lr-newmesTip {
  /* 新消息气泡提醒 */
  visibility: hidden;
  position: absolute;
  left: .24rem;
  top: -1.02rem;
  width: .72rem;
  height: .8rem;
}
.room-footer-bar .lr-newmesTip .lr-newmes-btn {
  display: block;
  width: .72rem;
  height: .8rem;
  padding-bottom: .08rem;
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  line-height: .72rem;
  text-align: center;
  background: url(/res/images/live-newmes.png) 0 0 no-repeat;
  background-size: .72rem .8rem;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  opacity: 0;
  -webkit-transform: translate(0, 1rem);
  transform: translate(0, 1rem);
}
.room-footer-bar .lr-newmesTip.show {
  visibility: visible;
}
.room-footer-bar .lr-newmesTip.show .lr-newmes-btn {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.room-footer-bar .lr-goPlay,
.room-footer-bar .lr-goPlay-room {
  /* 回到播放位置 */
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: -0.9rem;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.room-footer-bar .lr-goPlay .lr-goplay-btn,
.room-footer-bar .lr-goPlay-room .lr-goplay-btn {
  display: block;
  overflow: hidden;
  padding: 5px 10px;
  border-radius: 100px;
  background-color: rgba(16, 142, 233, 0.75);
  border: 1px solid #29a1f7;
  font-size: 12px;
  font-weight: 300;
  color: #fff;
  text-align: center;
  background-size: .72rem .8rem;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  opacity: 0;
  -webkit-transform: translate(0, 1rem);
  transform: translate(0, 1rem);
}
.room-footer-bar .lr-goPlay.show,
.room-footer-bar .lr-goPlay-room.show {
  visibility: visible;
}
.room-footer-bar .lr-goPlay.show .lr-goplay-btn,
.room-footer-bar .lr-goPlay-room.show .lr-goplay-btn {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.room-footer-bar .show-rereward-btn {
  /* 打赏按钮 - 相关弹窗 */
  position: absolute;
  right: .24rem;
  top: -1rem;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: .68rem;
  height: .68rem;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  background-color: #ff4c52;
  border: none;
  outline: none;
  -webkit-box-shadow: 0 0 5px 0 rgba(255, 76, 82, 0.5);
          box-shadow: 0 0 5px 0 rgba(255, 76, 82, 0.5);
  cursor: pointer;
}
.room-footer-bar .show-rereward-btn .text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #fff;
  font-size: 14px;
}
.room-footer-bar .right-operat-zone {
  position: absolute;
  right: .24rem;
  top: -5.3rem;
  z-index: 10;
}
.room-footer-bar .right-operat-zone .right-btns {
  width: .68rem;
}
.room-footer-bar .right-operat-zone .right-btns .item {
  margin: 15px 0;
}
.room-footer-bar .right-operat-zone .r-btn {
  width: .68rem;
  height: .68rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
}
.room-footer-bar .right-operat-zone .r-btn .o-icon {
  width: .68rem;
  height: .68rem;
}
.room-footer-bar .tool-bar {
  padding: 5px;
  min-height: 55px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.room-footer-bar .tool-bar .tl-voice,
.room-footer-bar .tool-bar .tl-image,
.room-footer-bar .tool-bar .tl-control,
.room-footer-bar .tool-bar .tl-text,
.room-footer-bar .tool-bar .tl-invite,
.room-footer-bar .tool-bar .tl-gifts {
  display: block;
  padding: 5px;
  border: none;
  outline: none;
  background-color: transparent;
}
.room-footer-bar .tool-bar .tl-voice .icon,
.room-footer-bar .tool-bar .tl-image .icon,
.room-footer-bar .tool-bar .tl-control .icon,
.room-footer-bar .tool-bar .tl-text .icon,
.room-footer-bar .tool-bar .tl-invite .icon,
.room-footer-bar .tool-bar .tl-gifts .icon {
  width: 30px;
  height: 30px;
}
.room-footer-bar .tool-bar .tl-inputbox {
  position: relative;
  padding: 0 5px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.room-footer-bar .tool-bar .tl-inputbox .input-box {
  display: block;
  width: 100%;
  height: 36px;
  min-height: 36px;
  max-height: 66px;
  padding: 7px 6px 7px 10px;
  border: none;
  outline: none;
  resize: none;
  border-radius: 5px;
  background-color: #f2f2f2;
  font-size: 15px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
  color: #404040;
}
.room-footer-bar .tool-bar .tl-inputbox .input-box::-webkit-input-placeholder {
  color: #999999;
}
.room-footer-bar .tool-bar .tl-discusbox {
  padding: 0 5px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.room-footer-bar .tool-bar .tl-discusbox .show-discussion-btn {
  display: block;
  width: 100%;
  height: 36px;
  padding: 7px 6px 7px 10px;
  border: none;
  outline: none;
  resize: none;
  border-radius: 5px;
  background-color: #f2f2f2;
  font-size: 15px;
  color: #999999;
  text-align: left;
}
.room-footer-bar .tool-bar .tl-discusbox .discussion-zone {
  position: relative;
  width: 100%;
  height: 36px;
  padding-right: 55px;
  border-radius: 5px;
  background-color: #f2f2f2;
}
.room-footer-bar .tool-bar .tl-discusbox .discussion-zone .discuss-input-text {
  height: 36px;
  padding: 7px 0 7px 10px;
  border: none;
  outline: none;
  resize: none;
  background-color: transparent;
  display: block;
  width: 100%;
  font-size: 15px;
  color: #404040;
}
.room-footer-bar .tool-bar .tl-discusbox .discussion-zone .discuss-input-text::-webkit-input-placeholder {
  color: #999999;
}
.room-footer-bar .tool-bar .tl-discusbox .discussion-zone .ask-label-box {
  position: absolute;
  right: 6px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  padding-left: 20px;
  color: #999999;
  font-weight: 300;
}
.room-footer-bar .tool-bar .tl-discusbox .discussion-zone .ask-label-box .ask-label {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  border: 1px solid #C1CACA;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 7px;
  border-radius: 1000px;
}
.room-footer-bar .tool-bar .tl-discusbox .discussion-zone .ask-label-box .ask-label::before {
  display: block;
  content: ' ';
}
.room-footer-bar .tool-bar .tl-discusbox .discussion-zone .ask-label-box .control-ask {
  display: none;
}
.room-footer-bar .tool-bar .tl-discusbox .discussion-zone .ask-label-box .control-ask:checked + label {
  background-color: #ECF2F7;
  border: 1px solid #108ee9;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
  color: #243441;
}
.room-footer-bar .tool-bar .tl-discusbox .discussion-zone .ask-label-box .control-ask:checked + label::before {
  content: ' ';
  border-radius: 100px;
  position: absolute;
  background: #108ee9;
  opacity: .8;
  -webkit-box-shadow: inset 0 15px 23px -10px rgba(187, 230, 240, 0.3), 0 2px 2px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 15px 23px -10px rgba(187, 230, 240, 0.3), 0 2px 2px rgba(0, 0, 0, 0.1);
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
}
.room-footer-bar .tool-bar .tl-send-btn {
  width: 80px;
  height: 30px;
  border-radius: 5px;
  background-color: #53aff2;
  border: none;
  outline: none;
  font-size: 15px;
  text-align: center;
  color: #ffffff;
}
.room-footer-bar .tool-bar .tl-discussend-btn {
  width: 60px;
  height: 30px;
  border-radius: 5px;
  background-color: #53aff2;
  border: none;
  outline: none;
  font-size: 15px;
  text-align: center;
  color: #ffffff;
}
.room-footer-bar .tool-bar-bottom {
  border-top: 1px solid #f2f2f2;
}
.room-footer-bar .pay-select-zone {
  padding: 6px 15px;
}
.room-footer-bar .pay-select-zone .btn {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0;
  border-radius: 5px;
  background-color: #108ee9;
  border: 1px solid #108ee9;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  line-height: 40px;
  color: #fff;
  outline: none;
  cursor: pointer;
}
.room-footer-bar.test::before {
  content: '';
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  bottom: -100%;
  z-index: 101;
  background-color: rgba(0, 0, 0, 0.7);
}
.flex-main .masking {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 102;
  background-color: rgba(0, 0, 0, 0);
}
.flex-other-bar {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 48px;
          flex: 0 0 48px;
  height: 48px;
  min-height: 48px;
}
.flex-other-bar .top-live-bar {
  position: relative;
  z-index: 10;
  height: 48px;
  min-height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
          box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
}
.flex-other-bar .top-live-bar .left-item,
.flex-other-bar .top-live-bar .right-item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 1.8rem;
          flex: 0 0 1.8rem;
}
.flex-other-bar .top-live-bar .left-item .account-zone,
.flex-other-bar .top-live-bar .right-item .account-zone {
  margin-left: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-other-bar .top-live-bar .left-item .account-zone .cover-zone,
.flex-other-bar .top-live-bar .right-item .account-zone .cover-zone {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 .6rem;
          flex: 0 0 .6rem;
  display: inline-block;
  width: .6rem;
  height: .6rem;
}
.flex-other-bar .top-live-bar .left-item .account-zone .cover-zone .cover-img,
.flex-other-bar .top-live-bar .right-item .account-zone .cover-zone .cover-img {
  width: .6rem;
  height: .6rem;
  overflow: hidden;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.flex-other-bar .top-live-bar .left-item .account-zone .follow-btn,
.flex-other-bar .top-live-bar .right-item .account-zone .follow-btn {
  margin-left: 5px;
  padding: .08rem 5px;
  border-radius: 5px;
  border: solid 1px #53aff2;
  background-color: transparent;
  font-size: .24rem;
  line-height: 1;
  color: #53aff2;
  outline: none;
}
.flex-other-bar .top-live-bar .left-item .barrage-control,
.flex-other-bar .top-live-bar .right-item .barrage-control {
  width: .88rem;
  height: .88rem;
  padding: .5rem 0 0;
  border: none;
  outline: none;
  text-align: center;
}
.flex-other-bar .top-live-bar .left-item .barrage-control.comment,
.flex-other-bar .top-live-bar .right-item .barrage-control.comment {
  background: transparent url(/res/images/lv-icon-comment1.png) center center no-repeat;
  background-size: .88rem .88rem;
}
.flex-other-bar .top-live-bar .left-item .barrage-control.danmu,
.flex-other-bar .top-live-bar .right-item .barrage-control.danmu {
  background: transparent url(/res/images/lv-icon-danmu-on.png) center center no-repeat;
  background-size: .88rem .88rem;
}
.flex-other-bar .top-live-bar .left-item .barrage-control.danmu-off,
.flex-other-bar .top-live-bar .right-item .barrage-control.danmu-off {
  background: transparent url(/res/images/lv-icon-danmu-off.png) center center no-repeat;
  background-size: .88rem .88rem;
}
.flex-other-bar .top-live-bar .left-item .barrage-control .text,
.flex-other-bar .top-live-bar .right-item .barrage-control .text {
  font-size: 10px;
  line-height: 20px;
  color: #999999;
}
.flex-other-bar .top-live-bar .right-item {
  font-size: 0;
}
.flex-other-bar .top-live-bar .info-item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0 5px;
  padding: 5px 0;
  text-align: center;
  overflow: hidden;
}
.flex-other-bar .top-live-bar .info-item .i-tit {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 20px;
  color: #404040;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flex-other-bar .top-live-bar .info-item .light-zone {
  font-size: 10px;
  line-height: 14px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-controller-zooe {
  width: 200%;
  height: 4.56rem;
  display: block;
  background-color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.record-controller-zooe .recording_click,
.record-controller-zooe .recording_longtap {
  float: left;
  position: relative;
  width: 50%;
  height: 100%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
.record-controller-zooe .recording_click .type-dd,
.record-controller-zooe .recording_longtap .type-dd {
  position: absolute;
  bottom: .4rem;
  width: 100%;
  text-align: center;
}
.record-controller-zooe .recording_click .type-dd .types-wrap,
.record-controller-zooe .recording_longtap .type-dd .types-wrap {
  position: relative;
  display: inline-block;
}
.record-controller-zooe .recording_click .type-dd .text,
.record-controller-zooe .recording_longtap .type-dd .text {
  display: inline-block;
  margin: 0 4px;
  font-size: 12px;
}
.record-controller-zooe .recording_click .type-dd .text::before,
.record-controller-zooe .recording_longtap .type-dd .text::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #999999;
}
.record-controller-zooe .recording_click .type-dd .text.on,
.record-controller-zooe .recording_longtap .type-dd .text.on {
  color: #108ee9;
}
.record-controller-zooe .recording_click .type-dd .text.on::before,
.record-controller-zooe .recording_longtap .type-dd .text.on::before {
  background-color: #108ee9;
}
.record-controller-zooe .recording_click .type-dd .slide,
.record-controller-zooe .recording_longtap .type-dd .slide {
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
  display: block;
  width: 30px;
  text-align: center;
}
.record-controller-zooe .recording_click .type-dd .slide.left,
.record-controller-zooe .recording_longtap .type-dd .slide.left {
  left: -34px;
}
.record-controller-zooe .recording_click .type-dd .slide.right,
.record-controller-zooe .recording_longtap .type-dd .slide.right {
  right: -34px;
}
.record-controller-zooe .recording_click .recording-txttip,
.record-controller-zooe .recording_longtap .recording-txttip {
  position: absolute;
  width: 100%;
  top: .4rem;
  font-size: .28rem;
  line-height: .6rem;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  text-align: center;
  color: #999999;
}
.record-controller-zooe .recording_click .second_dd,
.record-controller-zooe .recording_longtap .second_dd {
  display: block;
  position: absolute;
  width: 100%;
  top: .4rem;
  font-size: .28rem;
  line-height: .6rem;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  text-align: center;
  color: #108ee9;
}
.record-controller-zooe .recording_click .second_dd > i,
.record-controller-zooe .recording_longtap .second_dd > i {
  display: inline-block;
  width: .8rem;
  height: .6rem;
  vertical-align: top;
  background: url(/res/images/live-frequency.png) 0 0 no-repeat;
  background-size: 100% auto;
}
.record-controller-zooe .recording_click .second_dd > i.recording,
.record-controller-zooe .recording_longtap .second_dd > i.recording {
  background: url(/res/images/live-recording.gif) 0 0 no-repeat;
  background-size: 100% auto;
}
.record-controller-zooe .recording_click .second_dd .res-second-tip,
.record-controller-zooe .recording_longtap .second_dd .res-second-tip {
  display: inline-block;
  width: 1.6rem;
}
.record-controller-zooe .recording_click .second_dd .resNum,
.record-controller-zooe .recording_longtap .second_dd .resNum {
  font-style: normal;
}
.record-controller-zooe.ready .recording_click::before,
.record-controller-zooe.ready .recording_longtap::before {
  content: '正在检查设备...';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  color: #999999;
  text-align: center;
  line-height: 4.56rem;
}
.record-controller-zooe .recording_click {
  position: relative;
  height: 100%;
}
.record-controller-zooe .recording_click .btn-dd {
  position: relative;
  height: 100%;
  text-align: center;
}
.record-controller-zooe .recording_click .btn-dd > i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.84rem;
  height: 1.84rem;
  margin: -0.92rem 0 0 -0.92rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #e8e8e8;
}
.record-controller-zooe .recording_click .btn-dd .btn-recording {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
}
.record-controller-zooe .recording_click .btn-dd .start-rec {
  width: 1.48rem;
  height: 1.48rem;
  border-radius: 50%;
  margin: -0.74rem 0 0 -0.74rem;
  background-color: #ff4c52;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.record-controller-zooe .recording_click .btn-dd .stop_rec {
  width: .76rem;
  height: .76rem;
  border-radius: 8px;
  margin: -0.38rem 0 0 -0.38rem;
  background-color: #29a1f7;
}
.record-controller-zooe .recording_click .btn-dd .send_rec {
  width: 1.84rem;
  height: 1.84rem;
  line-height: 1.84rem;
  border-radius: 50%;
  margin: -0.92rem 0 0 -0.92rem;
  background-color: #29a1f7;
  font-size: .4rem;
  color: #fff;
}
.record-controller-zooe .recording_click .changetype-btn {
  position: absolute;
  width: 1rem;
  height: 100%;
  left: 0;
  top: 0;
  background: url(/res/images/live-arr-prev.png) center center no-repeat;
  background-size: 10px auto;
  opacity: 1;
}
.record-controller-zooe .recording_longtap {
  /* 长按模式 */
}
.record-controller-zooe .recording_longtap .btn-dd {
  position: relative;
  height: 100%;
  text-align: center;
}
.record-controller-zooe .recording_longtap .btn-dd > i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.2rem;
  height: 2.2rem;
  margin: -1.1rem 0 0 -1.1rem;
  border-radius: 50%;
  overflow: hidden;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.record-controller-zooe .recording_longtap .btn-dd .btn-recording {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  overflow: hidden;
}
.record-controller-zooe .recording_longtap .btn-dd .start_rec {
  display: block;
  padding: 0;
  border: none;
  width: 1.84rem;
  height: 1.84rem;
  margin: -0.92rem 0 0 -0.92rem;
  line-height: 1.84rem;
  border-radius: 50%;
  background: #29a1f7 url(/res/images/live-mic.png) center center no-repeat;
  background-size: .6rem .86rem;
  font-size: .4rem;
  color: #fff;
  outline: none;
}
.record-controller-zooe .recording_longtap .changetype-btn {
  position: absolute;
  width: 1rem;
  height: 100%;
  right: 0;
  top: 0;
  background: url(/res/images/live-arr-next.png) center center no-repeat;
  background-size: 10px auto;
  opacity: 1;
}
.record-controller-zooe .recording_longtap.recording .btn-dd > i {
  background-color: rgba(41, 160, 247, 0.2);
}
.record-controller-zooe .recording_longtap.recording .btn-dd .start_rec {
  background-color: #108ee9;
}
.record-controller-zooe.changeType .recording_longtap {
  margin-left: -50%;
}
.record-controller-zooe .recordingTips {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  margin: auto;
  width: 100%;
  height: 55px;
  line-height: 55px;
  text-align: center;
  font-size: .28rem;
  font-weight: 300;
  color: #fff;
}
.record-controller-zooe .recordingTips.rTips_1,
.record-controller-zooe .recordingTips.rTips_3,
.record-controller-zooe .recordingTips.rTips_4 {
  background-color: rgba(41, 160, 247, 0.98);
}
.record-controller-zooe .recordingTips.rTips_2,
.record-controller-zooe .recordingTips.rTips_5 {
  background-color: #ff4c52;
}
.record-controller-zooe .cancel-rec-btn {
  display: block;
  position: absolute;
  z-index: 10;
  right: .4rem;
  bottom: .64rem;
}
.record-controller-zooe .cancel-rec-btn > .cancel-btn {
  display: block;
  padding: 0 .4rem;
  line-height: .48rem;
  border: 1px solid #999999;
  border-radius: 50px;
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  color: #999999;
}
@-webkit-keyframes changeflash {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes changeflash {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
.controller-container {
  position: relative;
  width: 200%;
  height: 2.56rem;
  display: block;
  background-color: #fff;
}
.controller-container .control-hd {
  position: absolute;
  bottom: .2rem;
  left: 25%;
  z-index: 10;
  margin-left: -20px;
  width: 40px;
  text-align: center;
  font-size: 0;
}
.controller-container .control-hd > li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  overflow: hidden;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #999999;
  cursor: pointer;
}
.controller-container .control-hd > li.on {
  background-color: #999999;
  border: 1px solid #999999;
}
.controller-container .control-bd {
  float: left;
  position: relative;
  width: 50%;
  height: 100%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
.controller-container .control-bd.next {
  margin-left: -50%;
}
.controller-container .control-tool-list {
  width: 100%;
  height: 100%;
  padding: .3rem .3rem 0;
  font-size: 0;
}
.controller-container .control-tool-list .item {
  display: inline-block;
  width: 25%;
  margin-bottom: .4rem;
  text-align: center;
}
.controller-container .control-tool-list .item .icon {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 auto 10px;
}
.controller-container .control-tool-list .item .text {
  font-size: 12px;
  text-align: center;
  color: #999999;
  line-height: 12px;
}
.room-header {
  margin: 10px 11px 0;
  padding: 12px;
  border-radius: 5px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
          box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  text-align: center;
}
.room-header .turn-btn {
  display: inline-block;
  width: 115px;
  height: 30px;
  border-radius: 5px;
  background-color: #53aff2;
  line-height: 30px;
  color: #fff;
  font-size: 13px;
}
.room-header .btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.room-header .btns .btn {
  width: 48%;
  overflow: hidden;
  margin: 0 7px;
  padding: 0;
  height: 30px;
  border-radius: 5px;
  background-color: #53aff2;
  border: 1px solid transparent;
  line-height: 28px;
  font-size: 13px;
  color: #fff;
  text-align: center;
  outline: none;
}
.room-header .btns .btn.btn2 {
  background-color: #fff;
  border: 1px solid #53aff2;
  color: #53aff2;
}
.room-header .room-info-wrapper {
  margin-bottom: 15px;
  text-align: left;
}
.room-header .room-info-wrapper .cover-zone {
  float: left;
  width: 66px;
  height: 66px;
}
.room-header .room-info-wrapper .cover-zone .coverimg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.room-header .room-info-wrapper .info-main {
  margin-left: 76px;
}
.room-header .room-info-wrapper .info-main .live-name {
  height: 42px;
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 500;
  line-height: 21px;
  color: #404040;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.room-header .room-info-wrapper .info-main .live-time {
  font-size: 12px;
  line-height: 20px;
  color: #999999;
}
.room-mod-card {
  margin: 10px 11px 0;
  border-radius: 5px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
          box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  text-align: center;
}
.room-mod-card .rc-title {
  padding: 10px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 15px;
  line-height: 20px;
  color: #404040;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-mod-card .rc-main {
  padding: 10px 15px 15px;
}
.room-mod-card .guide-zone {
  font-size: 14px;
  line-height: 20px;
  color: #999999;
  text-align: left;
}
.room-mod-card .guide-zone .p1 {
  margin: 2px auto 4px;
}
.room-mod-card .invite-mod {
  margin-right: 10px;
  padding: 15px 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: url(/res/images/youda-arr-r.png) right center no-repeat;
  background-size: 15px 15px;
}
.room-mod-card .invite-mod .sale-title {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 50%;
          flex: 1 0 50%;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  text-align: left;
}
.room-mod-card .invite-mod .sale-profits {
  padding-right: 10px;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 50%;
          flex: 1 0 50%;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: #ff4c52;
  line-height: 20px;
  text-align: right;
}
.lv-system-box {
  margin: 20px 0 0;
  text-align: center;
  vertical-align: middle;
  font-size: 0;
}
.lv-system-box .sys-item {
  position: relative;
  display: inline-block;
  padding: 0 5px;
  height: 22px;
  line-height: 22px;
  border-radius: 5px;
  background-color: rgba(64, 64, 64, 0.2);
  font-size: 12px;
  text-align: center;
  color: #ffffff;
  vertical-align: top;
}
.lv-system-box .sys-item .name {
  display: inline-block;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}
.lv-system-box .sys-item.rewardMessages {
  padding-left: 20px;
}
.lv-system-box .sys-item.rewardMessages::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  width: 10px;
  height: 15px;
  background: url(/res/images/live-s-redpacket.png) center center no-repeat;
  background-size: 10px auto;
}
/* 直播间消息 - 音频 播放 */
.content-voice {
  position: relative;
  padding: 0;
}
.content-voice .voice-play-control {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 26px;
  height: 26px;
  padding: 3px;
}
.content-voice .voice-play-control .voice-icon {
  width: 20px;
  height: 20px;
}
.content-voice .time {
  display: block;
  width: 25px;
  position: absolute;
  right: 10px;
  top: 10px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  color: #999999;
}
.content-voice .not-listened {
  position: absolute;
  top: 2px;
  right: -15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #ff4c52;
}
.content-voice .progressBar {
  /*进度条样式*/
  display: block;
  margin: 0 45px 0 40px;
  position: relative;
  height: 40px;
}
.content-voice .progressBar .bar-bg {
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 19px;
  left: 0;
  background: #f2f2f2;
}
.content-voice .progressBar .speed {
  position: absolute;
  top: 19px;
  left: 0;
  height: 2px;
  background: #5db4f3;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.content-voice .progressBar .drag {
  position: absolute;
  width: 13px;
  height: 8px;
  top: -3.5px;
  right: -7px;
  background: url(/res/images/live-voice-drag1.png) right center no-repeat;
  background-size: 13px 8px;
}
.content-voice .playTime {
  /*时间样式*/
  width: 49px;
  height: 35px;
  position: absolute;
  right: -18px;
  top: -40px;
  background: url(/res/images/live-tshow-bg1.png) center center no-repeat;
  background-size: 49px 35px;
  font-size: 0;
}
.content-voice .playTime > .txt-tip {
  display: block;
  width: 100%;
  height: 100%;
  padding-bottom: 13px;
  text-align: center;
  font-style: normal;
  line-height: 24px;
  font-size: 12px;
  font-weight: 300;
  color: #fff;
}
.content-voice .playTime > .txt-tip var {
  font-style: normal;
}
.lv-single {
  margin: 22px 15px 0;
}
.lv-single .single-item {
  position: relative;
}
.lv-single .single-item .avtar-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
}
.lv-single .single-item .avtar-zone .avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.lv-single .single-item .si-wrapper {
  margin-left: 52px;
}
.lv-single .single-item .si-wrapper .siw-hd {
  height: 18px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lv-single .single-item .si-wrapper .siw-hd .si-name {
  line-height: 18px;
  font-size: 12px;
  color: #999999;
}
.lv-single .single-item .si-wrapper .siw-hd .si-design {
  display: inline-block;
  padding: 2px 4px;
  font-size: 10px;
  color: #108ee9;
  border: 1px solid #108ee9;
  border-radius: 2px;
}
.siw-container {
  width: 80%;
  position: relative;
}
.siw-container .siw-main-wrap {
  position: relative;
  padding: 8px 12px 8px 10px;
  border-radius: 5px;
  background-color: #bfdef6;
  border: solid 1px #9ed0f4;
}
.siw-container .siw-main-wrap.auto-width {
  display: inline-block;
  max-width: 100%;
}
.siw-container .recall-btn {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 1;
  display: inline-block;
  width: 24px;
  height: 24px;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  overflow: hidden;
}
.siw-container .recall-btn .btn-iocn {
  width: 100%;
  height: 100%;
}
.siw-container .resend-btn {
  position: absolute;
  top: 50%;
  right: -40px;
  z-index: 1;
  margin-top: -12px;
  width: 24px;
  height: 24px;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  overflow: hidden;
}
.siw-container .resend-btn .btn-iocn {
  width: 100%;
  height: 100%;
}
.siw-container .reload-btn {
  position: absolute;
  top: 50%;
  right: -40px;
  z-index: 1;
  margin-top: -12px;
  width: 24px;
  height: 24px;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  overflow: hidden;
}
.siw-container .reload-btn .btn-iocn {
  width: 100%;
  height: 100%;
}
.siw-container.prepare .siw-main-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(255, 255, 255, 0.7);
}
.siw-container .content-text {
  font-size: 15px;
  line-height: 20px;
  color: #404040;
  word-break: break-all;
  word-wrap: break-word;
}
.siw-container.single-voice .siw-main-wrap {
  padding: 0;
  height: 42px;
  margin-right: 24px;
}
.siw-container.single-image {
  max-width: 80%;
}
.siw-container.single-image .siw-main-wrap {
  display: inline-block;
  padding: 0;
  border: 3px solid #bfdef6;
  background-color: transparent;
}
.siw-container.single-image .siw-main-wrap img {
  -o-object-fit: contain;
     object-fit: contain;
}
.siw-container.reply-voice .siw-main-wrap,
.siw-container.reply-text .siw-main-wrap {
  background-color: #fff;
  border: solid 1px #fff;
}
.siw-container.reply-voice .content-ask,
.siw-container.reply-text .content-ask {
  padding: 0 0 10px 28px;
  min-height: 20px;
  line-height: 20px;
  border-bottom: 1px solid #f2f2f2;
  background: url(/res/images/live-cm-ask.png) 0 1px no-repeat;
  background-size: 18px 18px;
}
.siw-container.reply-voice .content-ask .text-zone,
.siw-container.reply-text .content-ask .text-zone {
  margin-bottom: 5px;
}
.siw-container.reply-voice .content-voice .time,
.siw-container.reply-text .content-voice .time {
  display: block;
  width: 25px;
  position: absolute;
  right: 5px;
  top: 10px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  color: #999999;
}
.siw-container.reply-voice .content-voice .not-listened,
.siw-container.reply-text .content-voice .not-listened {
  position: absolute;
  top: 5px;
  right: -5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #ff4c52;
}
.siw-container.reply-voice .content-voice .progressBar,
.siw-container.reply-text .content-voice .progressBar {
  /*进度条样式*/
  display: block;
  margin: 0 45px 0 40px;
  position: relative;
  height: 40px;
}
.siw-container.reply-voice .content-voice .progressBar .bar-bg,
.siw-container.reply-text .content-voice .progressBar .bar-bg {
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 19px;
  left: 0;
  background: #f2f2f2;
}
.siw-container.reply-voice .content-voice .progressBar .speed,
.siw-container.reply-text .content-voice .progressBar .speed {
  position: absolute;
  top: 19px;
  left: 0;
  height: 2px;
  background: #5db4f3;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.siw-container.reply-voice .content-voice .progressBar .drag,
.siw-container.reply-text .content-voice .progressBar .drag {
  position: absolute;
  width: 13px;
  height: 8px;
  top: -3.5px;
  right: -7px;
  background: url(/res/images/live-voice-drag1.png) right center no-repeat;
  background-size: 13px 8px;
  cursor: pointer;
}
.siw-container.reply-voice .siw-main-wrap {
  padding: 8px 12px 0 10px;
}
.siw-container.reply-voice .content-voice {
  height: 40px;
}
.siw-container.reply-text .content-reply {
  padding: 0 0 0 28px;
  margin: 10px 0 0 0;
  min-height: 20px;
  line-height: 20px;
  background: url(/res/images/live-cm-reply.png) 0 1px no-repeat;
  background-size: 18px 18px;
}
.siw-container.temp-none .siw-main-wrap {
  background-color: transparent;
  border: 1px solid transparent;
}
.siw-container.temp-none .content-ask {
  padding: 0 0 0 28px;
}
/* 讨论区弹幕 */
.lr-barrage-control {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 101;
}
.lr-barrage-control .black-bar {
  position: relative;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  border-radius: 4rem;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
}
.lr-barrage-control .black-bar > li {
  display: inline-block;
}
.lr-barrage-control .black-bar .main {
  padding: 0 30px 0 30px;
  white-space: nowrap;
  text-align: center;
}
.lr-barrage-control .black-bar .barrage-tab {
  overflow: hidden;
  border-radius: 3rem;
  cursor: pointer;
  color: #fff;
}
.lr-barrage-control .black-bar .btn-tab-1 {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 30px;
  height: 30px;
  background: url(/res/images/live-on.png) center center no-repeat;
  background-size: 15px auto;
}
.lr-barrage-control .black-bar .allcount {
  max-width: 0;
  padding-left: 0;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  background: url(/res/images/live-listen.png) 1px center no-repeat;
  background-size: 14px auto;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
.lr-barrage-control.open .btn-tab-1 {
  background-image: url(/res/images/live-off.png);
}
.lr-barrage-control.open .allcount {
  /* width: auto; */
  max-width: 10rem;
  padding-left: 25px;
}
.lr-barrage-control .lrbc-discuss {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
  cursor: pointer;
  width: 30px;
  height: 30px;
  padding: 9px 0;
  line-height: 12px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #108ee9;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
}
.lr-danmu-box {
  position: absolute;
  top: 53px;
  right: 12px;
  z-index: 100;
  max-width: 2.8rem;
}
.lr-danmu-box .danmulist {
  float: right;
}
.lr-danmu-box .danmulist dd {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  overflow: hidden;
  margin: 5px 0;
  cursor: pointer;
}
.lr-danmu-box .danmulist dd i {
  display: block;
  margin-left: 5px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  overflow: hidden;
}
.lr-danmu-box .danmulist dd i img {
  width: 20px;
  height: 20px;
  -o-object-fit: cover;
     object-fit: cover;
}
.lr-danmu-box .danmulist dd p {
  line-height: 1.4;
  overflow-y: hidden;
  color: #fff;
  font-size: .24rem;
  font-weight: 300;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 2px 6px;
  border-radius: 2px;
  position: relative;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lr-danmu-box .toggle-btn {
  position: absolute;
  bottom: -30px;
  left: 0;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  border: none;
  outline: none;
}
.lr-danmu-box .toggle-btn .icon {
  display: block;
  height: 10px;
  width: 12px;
}
.lr-danmu-reward {
  position: absolute;
  bottom: 58%;
  right: 0;
  z-index: 100;
  margin: 0 0 -35px 0;
}
.lr-danmu-reward .danmulist {
  min-width: 100px;
  max-width: 130px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lr-danmu-reward .danmulist .item {
  margin: 4px 0;
  height: 18px;
}
.lr-danmu-reward .danmulist .item.opacity-20 {
  opacity: .2;
}
.lr-danmu-reward .danmulist .item.opacity-60 {
  opacity: .6;
}
.lr-danmu-reward .danmu-wrapper {
  padding: 1px 2px 1px 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 100px 0 0 100px;
  background-color: rgba(0, 0, 0, 0.5);
}
.lr-danmu-reward .danmu-wrapper .avatar {
  margin-right: 5px;
  display: block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.lr-danmu-reward .danmu-wrapper .text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lr-danmu-reward .danmu-wrapper .money {
  color: #ffeb00;
}
/* 讨论区 - - 页面 */
.lr-discussion-box {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  z-index: 101;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.6);
}
.lr-discussion-box .bg-close {
  height: 120px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.lrcm-body {
  max-width: 640px;
  margin: auto;
  height: 100%;
  padding: 120px 0 0 0;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
}
.lrcm-body .body-top-bar {
  position: relative;
  padding: 0 15px;
  height: 45px;
  background-color: #f2f2f2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.lrcm-body .body-top-bar .backBtn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 50px;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
}
.lrcm-body .body-top-bar .backBtn .icon {
  width: 24px;
  height: 24px;
}
.lrcm-body .body-top-bar .bar-title {
  font-size: 14px;
  line-height: 1.43;
  color: #878787;
}
.lrcm-body .lrcmb-backBtn {
  min-height: .8rem;
  height: .8rem;
  line-height: .8rem;
  background-color: rgba(16, 141, 233, 0.9);
  text-align: center;
  color: #fff;
  font-size: .3rem;
}
.lrcm-body .lrcmb-verticalMain {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-bottom: 15px;
  background-color: #fff;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.lrcmb-vm-list {
  padding: 0 15px;
}
.lrcmb-vm-list > li {
  padding: 20px 0 10px;
  border-bottom: 1px solid #f2f2f2;
}
.lrcmb-vm-list > li:last-child {
  border: 0 none;
}
.lrcmb-vm-list .commenter-portrait {
  float: left;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.lrcmb-vm-list .commenter-main {
  margin-left: 45px;
}
.lrcmb-vm-list .commenter-main .cmter-nickname {
  min-height: 18px;
  font-size: 13px;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #999999;
}
.lrcmb-vm-list .commenter-main .cmter-content {
  margin: 5px 0;
  font-size: .3rem;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.4;
  letter-spacing: normal;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #404040;
}
.lrcmb-vm-list .commenter-main .cmter-content.cmter-ask {
  padding-left: 28px;
  background: url(/res/images/live-cm-ask.png) 0 3px no-repeat;
  background-size: 15px auto;
}
.lrcmb-vm-list .commenter-main .cmter-content-img {
  margin: 10px 0;
}
.lrcmb-vm-list .commenter-main .cmter-content-img.prepare {
  position: relative;
}
.lrcmb-vm-list .commenter-main .cmter-content-img.prepare::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
}
.lrcmb-vm-list .commenter-main .cmter-content-img .cmter-ci-image {
  cursor: pointer;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 100%;
  max-height: 120px;
}
.lrcmb-vm-list .cmter-data {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.lrcmb-vm-list .cmter-data .time {
  margin-right: 15px;
  color: #999999;
  font-weight: 300;
}
.lrcmb-vm-list .admin-operat {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.lrcmb-vm-list .admin-operat .cmter-del-btn {
  display: block;
  padding: 2px 8px;
  float: left;
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ff4c52;
}
.lrcmb-vm-list .admin-operat .cmter-reply-btn {
  display: block;
  padding: 2px 8px;
  float: right;
  border-radius: 5px;
  border: solid 1px #e8e8e8;
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #999999;
}
.lrcmb-vm-list .click-more-item {
  padding: 0;
}
.lrcmb-vm-list .click-more-item .commenter-main {
  margin-left: 45px;
}
.lrcmb-vm-list .click-more-item .commenter-main .not-more {
  margin: 0 45px 0 0;
  padding: 20px 0;
}
.lrcmb-vm-list .click-more-item .commenter-main .click-more {
  margin: 0 45px 0 0;
  padding: 20px 0;
}
.lrcmb-vm-list .click-more-item .commenter-main .click-more .text {
  text-align: center;
  font-size: 15px;
  color: #999999;
}
/* 嘉宾回复讨论 弹窗 -  */
.gusReply-dialog {
  display: block;
}
.gusReply-dialog .lr-guest {
  border: 0 none;
}
.gusReply-dialog .lrgue-tabbar > li {
  width: 50%;
}
.gusReply-dialog .dialog-btclose {
  position: relative;
  width: 40px;
  height: 40px;
  position: absolute;
  top: -50px;
  right: 10px;
}
.gusReply-dialog .dialog-btclose::before {
  content: '';
  display: block;
  position: absolute;
  bottom: -11px;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 22px;
  background-color: #fff;
}
.gusReply-dialog .dialog-btclose .content-close {
  position: absolute;
  display: block;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff url(/res/images/close-light.png) center center no-repeat;
  background-size: 10px auto;
}
.gusReply-dialog .reply-content-zone {
  border-top: 1px solid #e8e8e8;
  background-color: #fff;
}
/* 直播间 - 素材库 */
.lr-material-lib {
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  top: 0;
  z-index: 101;
  width: 100%;
  height: 100%;
  min-width: 320px;
  max-width: 640px;
  overflow: hidden;
  background-color: #ffffff;
}
.lr-material-lib .lrml-wraper {
  height: 100%;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
.lr-material-lib .lrml-backBtn {
  margin: 0 auto;
  width: 100%;
  height: 40px;
  min-width: 320px;
  max-width: 640px;
  text-align: center;
  background-color: #ff4c52;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  outline: none;
  border: none;
}
.lr-material-lib .lrml-uploadBtn {
  margin: 0 auto 5px;
  width: 86.66666667%;
  height: 45px;
  min-width: 275.2px;
  max-width: 550.4px;
  text-align: center;
  border: none;
  background-color: #108ee9;
  -webkit-box-shadow: 0 0 9px 0 rgba(16, 141, 233, 0.43);
          box-shadow: 0 0 9px 0 rgba(16, 141, 233, 0.43);
  border-radius: 100px;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  outline: none;
}
.lr-material-lib .lrml-uploadBtns {
  margin: 0 0 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.lr-material-lib .lrml-uploadBtns .btn {
  margin: 0 4%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0;
  border: solid 1px #108ee9;
  background-color: #fff;
  -webkit-box-shadow: 0 0 9px 0 rgba(16, 142, 233, 0.43);
          box-shadow: 0 0 9px 0 rgba(16, 142, 233, 0.43);
  font-size: 15px;
  font-weight: 500;
  color: #108ee9;
  text-align: center;
  line-height: 43px;
}
.lr-material-lib .lrml-uploadBtns .btn.type1 {
  border: 1px solid #fff;
  background-color: #108ee9;
  color: #fff;
}
.lr-material-lib .lrml-body {
  -moz-flex: 1;
  -ms-flex: 1;
  -o-flex: 1;
  -webkit-box-flex: 1;
          flex: 1;
  padding: 0 0 15px 0;
  background-color: #fff;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.lr-material-lib .lrml-body.recording {
  padding-bottom: 4.56rem;
}
.lr-material-lib .lrml-body .lrml-tip {
  font-size: .28rem;
  font-weight: 300;
  color: #999999;
  text-align: center;
  white-space: nowrap;
  margin: 0 .3rem;
  padding: .3rem 0;
}
.lr-material-lib .tool-bar-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
}
.lr-material-lib .tool-bar-bottom .recard-main-zooe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: auto;
  border-top: 1px solid #ededed;
}
.lr-material-lib .tool-bar-bottom .recard-main-zooe .control-zooe-close {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 11;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent url(/res/images/icon-close_3@24x24.png) center center no-repeat;
  background-size: 24px;
}
.lr-material-lib .tool-bar-bottom .recard-main-zooe #rec-tips-bar .recordingTips {
  top: -55px;
}
.lr-material-lib .tool-bar-bottom .record-controller-zooe {
  display: block !important;
}
.lrml-lib-list > li {
  padding: .2rem .3rem;
}
.lrml-lib-list.list-images > .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.lrml-lib-list.list-images > .item .i-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: #f4f6f8;
  border: 1px solid #e8e8e8;
  height: 2.2rem;
}
.lrml-lib-list.list-images > .item .i-content.prepare {
  position: relative;
}
.lrml-lib-list.list-images > .item .i-content.prepare::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.4);
}
.lrml-lib-list.list-images > .item .i-content.prepare::after {
  content: '正在上传中…';
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
  text-align: center;
  font-size: .28rem;
  font-weight: 400;
  color: #ffffff;
}
.lrml-lib-list.list-images > .item .i-content .lib-image {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 2.2rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.lrml-lib-list.list-images > .item .list-btn {
  width: 1.1rem;
  height: .6rem;
  margin-left: .4rem;
  font-size: .28rem;
  font-weight: 400;
  color: #ffffff;
  border: none;
  outline: none;
  padding: 0;
}
.lrml-lib-list.list-images > .item .list-btn.list-btn-del {
  background-color: #999999;
}
.lrml-lib-list.list-images > .item .list-btn.list-btn-send {
  background-color: #108ee9;
}
.lrml-lib-list.list-video .i-left-icon {
  float: left;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 5px;
  background: #404040 url(/res/images/live-lib-video2.png) center center no-repeat;
  background-size: .96rem .96rem;
}
.lrml-lib-list.list-video .i-main {
  margin: 0 0 0 1.5rem;
  height: 1.3rem;
}
.lrml-lib-list.list-video .i-main .i-video-name {
  font-size: .3rem;
  font-weight: 500;
  line-height: 1.33;
  color: #404040;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lrml-lib-list.list-video .i-main .i-upload {
  margin: .18rem 0 0 0;
}
.lrml-lib-list.list-video .i-main .i-upload .progress-bar-bg {
  position: relative;
  border-radius: 100px;
  width: 100%;
  height: .2rem;
  background-color: #f2f2f2;
}
.lrml-lib-list.list-video .i-main .i-upload .progress-bar-bg .progress {
  position: absolute;
  top: 0;
  left: 0;
  height: .2rem;
  background-color: #ff4c52;
  border-radius: 100px;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
.lrml-lib-list.list-video .i-main .i-upload .i-upload-tip,
.lrml-lib-list.list-video .i-main .i-upload .i-transcoding-tip {
  margin: .2rem 0 0 0;
}
.lrml-lib-list.list-video .i-main .i-upload .i-upload-tip span,
.lrml-lib-list.list-video .i-main .i-upload .i-transcoding-tip span {
  font-size: 12px;
  line-height: 1.33;
  color: #999999;
}
.lrml-lib-list.list-video .i-main .i-btns-box {
  display: none;
  margin: .3rem 0 0 0;
  text-align: right;
}
.lrml-lib-list.list-video .i-main .i-btns-box .list-btn {
  width: 1.1rem;
  height: .6rem;
  margin-left: .4rem;
  border-radius: 5px;
  border: none;
  font-size: .28rem;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  outline: none;
}
.lrml-lib-list.list-video .i-main .i-btns-box .list-btn.list-btn-del {
  background-color: #999999;
}
.lrml-lib-list.list-video .i-main .i-btns-box .list-btn.list-btn-send {
  background-color: #108ee9;
}
.lrml-lib-list.list-voice .item {
  position: relative;
}
.lrml-lib-list.list-voice .item:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.lrml-lib-list.list-voice .lib-voice-player {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.lrml-lib-list.list-voice .lib-voice-player .content-voice {
  margin-right: 20px;
  height: 42px;
  width: 210px;
  border-radius: 5px;
  background-color: #bfdef6;
  border: solid 1px #9ecff3;
  position: relative;
}
.lrml-lib-list.list-voice .lib-voice-player .content-voice.prepare::before {
  content: '正在上传中…';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  font-size: .3rem;
  line-height: 40px;
  text-align: center;
  color: #fff;
}
.lrml-lib-list.list-voice .lib-voice-player .send-state {
  font-size: 15px;
  line-height: 20px;
  color: #999999;
}
.lrml-lib-list.list-voice .lib-voice-player .resend-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  overflow: hidden;
}
.lrml-lib-list.list-voice .lib-voice-player .resend-btn .btn-iocn {
  width: 24px;
  height: 24px;
}
.lrml-lib-list.list-voice .lib-voice-operate {
  margin-top: 15px;
  position: relative;
  padding-right: 3rem;
  height: .6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  overflow: hidden;
}
.lrml-lib-list.list-voice .lib-voice-operate .remark-main {
  font-size: 15px;
  line-height: 24px;
  color: #999999;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lrml-lib-list.list-voice .lib-voice-operate .remark-btn {
  min-width: 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
}
.lrml-lib-list.list-voice .lib-voice-operate .remark-btn .icon {
  margin: 3px;
  width: 24px;
}
.lrml-lib-list.list-voice .i-btns-box {
  position: absolute;
  right: 0;
  top: 0;
}
.lrml-lib-list.list-voice .i-btns-box .list-btn {
  width: 1.1rem;
  height: .6rem;
  padding: 0;
  margin-left: .4rem;
  border: none;
  font-size: .28rem;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  outline: none;
}
.lrml-lib-list.list-voice .i-btns-box .list-btn.list-btn-del {
  background-color: #999999;
}
.lrml-lib-list.list-voice .i-btns-box .list-btn.list-btn-send {
  background-color: #108ee9;
}
.lr-material-group-lib {
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  top: 0;
  z-index: 101;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.lr-material-group-lib .lrml-wraper {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
}
.lr-material-group-lib .lrml-wraper .lrml-back-room-btn {
  height: 120px;
}
.lr-material-group-lib .lrml-body {
  position: relative;
  padding: 46px 0 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  background-color: #f4f6f8;
}
.lr-material-group-lib .lib-tabs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.lr-material-group-lib .lib-tabs .lib-item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 45px;
  text-align: center;
  overflow: hidden;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
  cursor: pointer;
}
.lr-material-group-lib .lib-tabs .lib-item:not(:last-child) {
  border-right: 1px solid #e8e8e8;
}
.lr-material-group-lib .lib-tabs .lib-item.active {
  background-color: #f4f6f8;
  border-bottom-color: #f4f6f8;
}
.lr-material-group-lib .lib-main-block {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.lr-material-group-lib .lib-wrapper-primary {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-bottom: 15px;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.lr-material-group-lib .lib-wrapper-primary .tip-header {
  padding: 20px 15px;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  text-align: center;
}
.lr-material-group-lib .lib-block-footer {
  height: 55px;
  padding: 0 7px;
  border-top: 1px solid #e8e8e8;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.lr-material-group-lib .lib-block-footer .btn {
  margin: 0 8px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 40px;
  padding: 0;
  background-color: #f2f2f2;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
}
.lr-material-group-lib .images-material-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 15px;
}
.lr-material-group-lib .images-material-list .item {
  position: relative;
  width: 31%;
  min-width: 31%;
  padding-top: 31%;
  margin-bottom: 3.5%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  overflow: hidden;
}
.lr-material-group-lib .images-material-list .item:not( :nth-of-type(3n+3)) {
  margin-right: 3.5%;
}
.lr-material-group-lib .images-material-list .item .img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.lr-material-group-lib .images-material-list .item .img.prepare {
  position: relative;
}
.lr-material-group-lib .images-material-list .item .img.prepare::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.4);
}
.lr-material-group-lib .images-material-list .item .img.prepare::after {
  content: '正在上传中…';
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
  text-align: center;
  font-size: .28rem;
  font-weight: 400;
  color: #ffffff;
}
.lr-material-group-lib .images-material-list .not-main-item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 50px 0 20px;
  -ms-flex-item-align: center;
      align-self: center;
}
.lr-material-group-lib .audios-material-list {
  padding: 0 15px;
}
.lr-material-group-lib .audios-material-list .item {
  margin-bottom: 20px;
}
.lr-material-group-lib .audios-material-list .not-main-item {
  padding: 50px 0 20px;
  -ms-flex-item-align: center;
      align-self: center;
}
.lr-material-group-lib .audios-material-list .lib-voice-player {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.lr-material-group-lib .audios-material-list .lib-voice-player .content-voice {
  margin-right: 20px;
  height: 42px;
  width: 4.2rem;
  max-width: 210px;
  border-radius: 5px;
  background-color: #bfdef6;
  border: solid 1px #9ecff3;
  position: relative;
}
.lr-material-group-lib .audios-material-list .lib-voice-player .content-voice.prepare::before {
  content: '正在上传中…';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  font-size: .3rem;
  line-height: 40px;
  text-align: center;
  color: #fff;
}
.lr-material-group-lib .audios-material-list .lib-voice-player .material-name {
  height: 42px;
  padding: 11px 55px 11px 45px;
  font-size: 15px;
  color: #404040;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.lr-material-group-lib .audios-material-list .lib-voice-player .send-state {
  font-size: 15px;
  line-height: 20px;
  color: #999999;
}
.lr-material-group-lib .audios-material-list .lib-voice-player .resend-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  overflow: hidden;
}
.lr-material-group-lib .audios-material-list .lib-voice-player .resend-btn .btn-iocn {
  width: 24px;
  height: 24px;
}
.lr-material-group-lib .videos-material-list {
  padding: 0 15px;
}
.lr-material-group-lib .videos-material-list .item {
  margin-bottom: 20px;
}
.lr-material-group-lib .videos-material-list .not-main-item {
  padding: 50px 0 20px;
  -ms-flex-item-align: center;
      align-self: center;
}
.lr-material-group-lib .videos-material-list .video-material {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.lr-material-group-lib .videos-material-list .video-material .left-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 10px;
  width: 65px;
  height: 65px;
  min-width: 65px;
  border-radius: 10px;
  border: 1px solid #f2f2f2;
  background-color: #fff;
}
.lr-material-group-lib .videos-material-list .video-material .left-icon .icon {
  width: 48px;
  height: 48px;
}
.lr-material-group-lib .videos-material-list .video-material .video-material-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
}
.lr-material-group-lib .videos-material-list .video-material .video-material-main .vm-name {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 20px;
  color: #393939;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.lr-material-group-lib .videos-material-list .video-material .update-tip {
  font-size: 12px;
  color: #999999;
}
.lr-material-group-lib .videos-material-list .video-material .update-tip .progress-bar {
  position: relative;
  width: 100%;
  height: 10px;
  margin-bottom: 10px;
  border-radius: 100px;
  background-color: #ededed;
}
.lr-material-group-lib .videos-material-list .video-material .update-tip .progress-bar .progress {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 10px;
  border-radius: 100px;
  background-color: #53aff2;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.lr-material-group-lib .tool-bar-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
}
.lr-material-group-lib .tool-bar-bottom .recard-main-zooe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: auto;
  border-top: 1px solid #ededed;
}
.lr-material-group-lib .tool-bar-bottom .recard-main-zooe .control-zooe-close {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 11;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent url(/res/images/icon-close_3@24x24.png) center center no-repeat;
  background-size: 24px;
}
.lr-material-group-lib .tool-bar-bottom .recard-main-zooe #rec-tips-bar .recordingTips {
  top: -55px;
}
.lr-material-group-lib .tool-bar-bottom .record-controller-zooe {
  display: block !important;
}
.screen-options-dialog {
  display: block;
}
.screen-options-dialog .dialog-bottomMain {
  padding: 0 15px 20px;
}
.screen-options-dialog .opt-btn {
  display: block;
  width: 100%;
  height: 58px;
  padding: 0;
  border: none;
  background-color: #fff;
  text-align: center;
  line-height: 58px;
  font-size: 20px;
  font-weight: 500;
  color: #007aff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
.screen-options-dialog .opt-btn.danger-btn {
  color: #ff4c52;
}
.screen-options-dialog .single-btn-zone {
  margin-top: 10px;
}
.screen-options-dialog .single-btn-zone .opt-btn {
  border-radius: 15px;
}
.screen-options-dialog .opt-list {
  border-radius: 15px;
  overflow: hidden;
}
.screen-options-dialog .opt-list .item {
  position: relative;
  display: block;
  width: 100%;
}
.screen-options-dialog .opt-list .item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 1px;
  width: 100%;
  background-color: #ededed;
}
/* 打赏 - 相关弹窗 */
.reward-dialog {
  display: block;
}
.reward-dialog .dialog-close {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background: url(/res/images/live-red-close.png) center center no-repeat;
  background-size: .24rem auto;
}
.reward-dialog .dialog-main {
  width: 80%;
  max-width: 450px;
  padding: .32rem;
  border-radius: 5px;
  background-color: #ffffff;
  background-image: url(/res/images/live-red-hdbg.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.reward-dialog .rwdl-userinfo-zone {
  position: relative;
  margin: 0 auto .48rem;
}
.reward-dialog .rwdl-userinfo-zone .rwdl-portrait-zone {
  position: relative;
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0 auto .2rem;
}
.reward-dialog .rwdl-userinfo-zone .rwdl-portrait-zone .rwdl-portrait {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.reward-dialog .rwdl-userinfo-zone .rwdl-portrait-zone .change-teacher-btn {
  position: absolute;
  bottom: -5px;
  left: .8rem;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 0;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  background-color: transparent;
  height: 24px;
  width: 60px;
}
.reward-dialog .rwdl-userinfo-zone .rwdl-portrait-zone .change-teacher-btn .icon {
  width: 24px;
  height: 24px;
}
.reward-dialog .rwdl-userinfo-zone .rwdl-portrait-zone .change-teacher-btn .text {
  line-height: 24px;
  font-size: 12px;
  color: #ffffff;
}
.reward-dialog .rwdl-userinfo-zone .rwdl-nickname {
  height: .3rem;
  margin: 0 1.6rem;
  line-height: .3rem;
  text-align: center;
  font-size: .3rem;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  color: #fff;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reward-dialog .rwdl-rwtip {
  font-size: .26rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.0;
  letter-spacing: normal;
  color: #999999;
  text-align: center;
}
.reward-dialog .rwdl-btns {
  margin: .5rem .2rem .3rem;
}
.reward-dialog .rwdl-btns > li {
  width: 33.33%;
  padding: .1rem .05rem;
  float: left;
}
.reward-dialog .rwdl-btns > li > a {
  padding: .2rem 0;
  display: block;
  border-radius: 5px;
  background-color: rgba(254, 76, 82, 0.15);
  border: solid 1px rgba(255, 76, 82, 0.2);
  font-size: 12px;
  text-align: center;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #ff4c52;
}
.reward-dialog .rwdl-btns > li > a .rwdl-num {
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
}
.reward-dialog .rwdl-other-zone {
  margin: 0 .2rem;
}
.reward-dialog .rwdl-other-zone .other-control {
  margin-bottom: 15px;
  padding: 0 .05rem;
}
.reward-dialog .rwdl-other-zone .other-control .other-num {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0 15px;
  width: 100%;
  height: 44px;
  border-radius: 5px;
  border: solid 1px #d8d8d8;
  font-size: 15px;
  color: #404040;
  outline: none;
}
.reward-dialog .rwdl-other-zone .other-control .other-num::-webkit-input-placeholder {
  color: #999999;
}
.reward-dialog .rwdl-other-zone .other-control .other-num:-ms-input-placeholder {
  color: #999999;
}
.reward-dialog .rwdl-other-zone .other-control .other-num::-ms-input-placeholder {
  color: #999999;
}
.reward-dialog .rwdl-other-zone .other-control .other-num::placeholder {
  color: #999999;
}
.reward-dialog .rwdl-other-zone .btn-zone .confirm-other-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  margin: 0 auto;
  width: 121px;
  height: 44px;
  border-radius: 5px;
  border: none;
  background-color: #ff4c52;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}
.reward-dialog .rwdl-other-zone .btn-zone .confirm-other-btn.disabled {
  background-color: #d8d8d8;
}
.reward-dialog .rwdl-othnum {
  display: block;
  margin: 0 auto;
  width: 2rem;
  height: .6rem;
  line-height: .6rem;
  text-align: center;
}
.reward-teachers-dialog {
  display: block;
}
.reward-teachers-dialog .dialog-close {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background: url(/res/images/icon-close_3@24x24.png) center center no-repeat;
  background-size: 24px;
}
.reward-teachers-dialog .dialog-main {
  max-width: 450px;
  width: 80%;
  color: #404040;
  background-color: #fff;
  border-radius: 5px;
}
.reward-teachers-dialog .dialog-header {
  height: 44px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #f4f6f8;
}
.reward-teachers-dialog .dialog-header .title-zone {
  font-size: 16px;
  font-weight: 500;
  color: #404040;
}
.reward-teachers-dialog .guestlist-zone {
  padding: 10px 0;
  max-height: 320px;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.reward-teachers-dialog .guestlist {
  padding: 10px;
}
.reward-teachers-dialog .guestlist .item {
  padding: 5px;
  border: 2px solid #fff;
  border-radius: 3px;
}
.reward-teachers-dialog .guestlist .item.active {
  background-color: rgba(255, 76, 82, 0.1);
  background-size: 28px;
  border: 1px solid rgba(255, 76, 82, 0.8);
}
.reward-teachers-dialog .guestlist .teacger-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.reward-teachers-dialog .guestlist .teacger-wrapper .avatar-zone {
  width: 46px;
  height: 46px;
  min-width: 46px;
  margin-right: 10px;
}
.reward-teachers-dialog .guestlist .teacger-wrapper .avatar-zone .avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}
.reward-teachers-dialog .guestlist .teacger-wrapper .right-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
}
.reward-teachers-dialog .guestlist .teacger-wrapper .right-main .nickname {
  margin: 5px 0;
  font-size: 14px;
  font-weight: 500;
  color: #404040;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reward-teachers-dialog .guestlist .teacger-wrapper .right-main .room-title {
  font-size: 12px;
  line-height: 14px;
  color: #999999;
}
.reward-oth-dialog {
  display: block;
}
.reward-oth-dialog .dialog-close {
  background: url(/res/images/close-light.png) center center no-repeat;
  background-size: .24rem auto;
}
.reward-oth-dialog .dialog-main {
  width: 80%;
  max-width: 450px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 5px;
}
.reward-oth-dialog .dialog-main .dialog-hd {
  padding-top: .3rem;
  text-align: center;
  font-size: .3rem;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #999999;
  background-color: #fff;
  border-radius: 5px 5px 0 0;
}
.reward-oth-dialog .dialog-main .dialog-content {
  padding: .4rem .24rem;
  background-color: #fff;
}
.reward-oth-dialog .dialog-main .dialog-content .inp_control {
  line-height: .4rem;
  font-size: .28rem;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 10px;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.reward-oth-dialog .dialog-main .dialog-content .inp_control > .inp_num {
  padding-left: 14px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: transparent;
  outline: none;
  color: #404040;
  font-size: 14px;
  font-weight: 300;
}
.reward-oth-dialog .dialog-main .dialog-content .inp_control > .inp_num::-webkit-input-placeholder {
  color: #999999;
}
.reward-oth-dialog .dialog-main .dialog-content .inp_control .reward-label {
  white-space: nowrap;
}
.reward-oth-dialog .dialog-main .btn_subtel {
  display: block;
  background-image: -webkit-gradient(linear, right top, left top, from(#ff5561), to(#ff7c4f));
  background-image: linear-gradient(to left, #ff5561, #ff7c4f);
  border-radius: 0 0 5px 5px;
  color: #fff;
  height: .9rem;
  line-height: .9rem;
  text-align: center;
  font-size: .28rem;
}
/* 打包赠送弹窗 */
.packGiftDia,
.checkPackGiftDia {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.packGiftDia .dialog-bottomMain,
.checkPackGiftDia .dialog-bottomMain {
  padding: 0 .3rem;
  background-color: #fff;
}
.packGiftDia .content-list > li,
.checkPackGiftDia .content-list > li {
  padding: 12px 0;
}
.packGiftDia .content-list > li:not(:last-child),
.checkPackGiftDia .content-list > li:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.packGiftDia .content-list .i-info .title,
.checkPackGiftDia .content-list .i-info .title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.44;
  color: #404040;
  margin-bottom: 3px;
}
.packGiftDia .content-list .i-info .time,
.checkPackGiftDia .content-list .i-info .time {
  font-size: 15px;
  line-height: 1.73;
  color: #999999;
}
.packGiftDia .content-list .i-flex,
.checkPackGiftDia .content-list .i-flex {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.packGiftDia .content-list .i-flex .i-left,
.checkPackGiftDia .content-list .i-flex .i-left {
  -moz-flex: 1;
  -ms-flex: 1;
  -o-flex: 1;
  -webkit-box-flex: 1;
          flex: 1;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.33;
}
.packGiftDia .content-list .i-flex .i-right .money,
.checkPackGiftDia .content-list .i-flex .i-right .money {
  font-size: 15px;
  font-weight: 500;
  color: #ff4c52;
}
.packGiftDia .content-list .i-main-box .im-title,
.checkPackGiftDia .content-list .i-main-box .im-title {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.33;
}
.packGiftDia .content-list .i-main-box .rwdlgifts-btns > li,
.checkPackGiftDia .content-list .i-main-box .rwdlgifts-btns > li {
  width: 30%;
  float: left;
  margin: 0 0 5% 0;
}
.packGiftDia .content-list .i-main-box .rwdlgifts-btns > li:not( :nth-of-type(3n)),
.checkPackGiftDia .content-list .i-main-box .rwdlgifts-btns > li:not( :nth-of-type(3n)) {
  margin-right: 5%;
}
.packGiftDia .content-list .i-main-box .rwdlgifts-btns > li > a,
.checkPackGiftDia .content-list .i-main-box .rwdlgifts-btns > li > a {
  padding: .14rem 0;
  display: block;
  border-radius: 5px;
  background-color: #fff;
  border: solid 1px #e8e8e8;
  font-size: .3rem;
  text-align: center;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #404040;
}
.packGiftDia .content-list .i-main-box .rwdlgifts-btns > li.on > a,
.checkPackGiftDia .content-list .i-main-box .rwdlgifts-btns > li.on > a {
  background-color: #ff4c52;
  border: solid 1px #ff4c52;
  color: #fff;
}
.packGiftDia .content-list .i-main-box .im-tip,
.checkPackGiftDia .content-list .i-main-box .im-tip {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.23;
  color: #999999;
  font-weight: 300;
}
.packGiftDia .content-list .i-main-box .money,
.checkPackGiftDia .content-list .i-main-box .money {
  color: #ff4c52;
}
.packGiftDia .content-list .num-btns > li,
.checkPackGiftDia .content-list .num-btns > li {
  float: left;
}
.packGiftDia .content-list .num-btns > li:not(:last-child),
.checkPackGiftDia .content-list .num-btns > li:not(:last-child) {
  margin-right: 5px;
}
.packGiftDia .content-list .num-btns > li.btn,
.checkPackGiftDia .content-list .num-btns > li.btn {
  width: 24px;
  height: 24px;
}
.packGiftDia .content-list .num-btns > li.income .income-number,
.checkPackGiftDia .content-list .num-btns > li.income .income-number {
  text-align: center;
  width: 40px;
  min-width: 40px;
  padding: 0 5px;
  border: 1px solid #f2f2f2;
  display: inline-block;
  height: 24px;
  font-size: 15px;
  -webkit-appearance: none;
}
.packGiftDia .content-list .footer-btn,
.checkPackGiftDia .content-list .footer-btn {
  display: block;
  padding: 0;
  width: 100%;
  border-radius: 5px;
  background-color: #ff4c52;
  border: none;
  outline: none;
  color: #fff;
  line-height: 40px;
  height: 40px;
  text-align: center;
  font-size: 15px;
}
.packGiftDia .content-list .i-ready,
.checkPackGiftDia .content-list .i-ready {
  text-align: center;
}
.packGiftDia .content-list .i-ready .title,
.checkPackGiftDia .content-list .i-ready .title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.44;
  color: #404040;
  margin: 28px 0 15px 0;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.packGiftDia .content-list .i-ready .text,
.checkPackGiftDia .content-list .i-ready .text {
  margin-bottom: 23px;
  font-size: 15px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.73;
  color: #999999;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 倒计时弹窗 */
.countDownDia .dialog-bgc {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.countDownDia .dialog-main {
  width: 75%;
  max-width: 380px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.countDownDia .dialog-main .dialog-title {
  padding: .5rem 0;
  font-size: 15px;
  color: #404040;
  text-align: center;
}
.countDownDia .dialog-main .dialog-content {
  margin-bottom: 15px;
  text-align: center;
}
.countDownDia .dialog-main .dialog-content .countdown-box {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.countDownDia .dialog-main .dialog-content .countdown-box > li.num {
  width: .6rem;
  height: .6rem;
  padding: .1rem 0;
  border-radius: 3px;
  text-align: center;
  background-color: #108ee9;
  font-size: .36rem;
  font-weight: 400;
  color: #fff;
}
.countDownDia .dialog-main .dialog-content .countdown-box > li.unit {
  padding-right: .16rem;
  font-size: .24rem;
  font-weight: 300;
  -webkit-transform: scale(0.86, 0.86);
  transform: scale(0.86, 0.86);
  color: #108ee9;
}
.countDownDia .dialog-main .dialog-btclose {
  display: block;
  width: 100%;
  padding: 12px 0;
  border: none;
  border-top: 1px solid #f2f2f2;
  background-color: #fff;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: #108ee9;
}
.tip-follow-box {
  margin: 15px 0 .2rem;
  vertical-align: middle;
  text-align: center;
}
.tip-follow-box .follow-label {
  font-size: 15px;
  font-weight: 300;
  color: #999999;
}
.tip-follow-box .follow-control {
  -webkit-appearance: checkbox;
}
/* 欢迎进入弹窗 */
.welcomeDia .dialog-bgc {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.welcomeDia .dialog-main {
  top: 50%;
  width: 75%;
  max-width: 380px;
  background-color: #fff;
  border-radius: 5px;
}
.welcomeDia .dialog-main .dialog-title {
  padding: 25px 0 0;
  font-size: 15px;
  color: #404040;
  text-align: center;
}
.welcomeDia .dialog-main .dialog-content {
  min-height: 30px;
  overflow: hidden;
  color: #404040;
}
.welcomeDia .dialog-main .dialog-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
}
.welcomeDia .dialog-main .dialog-footer > a {
  padding: 12px 10px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-top: 1px solid #f2f2f2;
  width: 50%;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}
.welcomeDia .dialog-main .dialog-footer > a:last-child {
  border-left: 1px solid #f2f2f2;
}
.welcomeDia .dialog-main .dialog-footer .dialog-cancel-btn {
  color: #999999;
}
.welcomeDia .dialog-main .dialog-footer .dialog-confirm-btn {
  color: #108ee9;
}
.filter-blur {
  -webkit-filter: blur(10px);
          filter: blur(10px);
  position: relative;
}
.filter-blur::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgbd(255, 255, 255, 0.1);
}
.follow-dkt-dialog {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.follow-dkt-dialog .dialog-main {
  border-radius: 11px;
  overflow: hidden;
  width: 88%;
  max-width: 450px;
}
.room-handle-dialog {
  display: block;
}
.room-handle-dialog .dialog-bottomMain {
  max-width: 640px;
  margin: auto;
  background-color: #f4f6f8;
}
.room-handle-dialog .dialog-bottomMain .dialog-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 50px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: #191919;
  background-color: #fff;
  border-bottom: 2px solid #ededed;
}
.room-handle-dialog .dialog-bottomMain .handle-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 44px;
  background-color: #fff;
  font-size: 15px;
  color: #404040;
  line-height: 20px;
  font-weight: 500;
}
.room-handle-dialog .dialog-bottomMain .handle-btn.cancel-btn {
  margin-top: 10px;
}
.room-handle-dialog .handle-list .item:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.column-wrapper {
  margin: 10px 0;
}
.column-wrapper .item {
  padding: 0 15px;
  background-color: #fff;
  cursor: pointer;
}
.column-wrapper .item:not(:last-child) {
  position: relative;
  border-bottom: 1px solid #f2f2f2;
}
.column-wrapper .flex-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-height: 44px;
  padding-right: 25px;
  background: url(/res/images/youda-arr-r.png) right center no-repeat;
  background-size: 15px 15px;
  overflow: hidden;
}
.column-wrapper .flex-wrap .account-cover-title {
  padding: 15px 0;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
  line-height: 20px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.column-wrapper .flex-wrap .account-cover-zone {
  margin: 15px 0;
  width: 72px;
  height: 72px;
}
.column-wrapper .flex-wrap .account-cover-zone .cover-image {
  width: 72px;
  height: 72px;
  -o-object-fit: cover;
     object-fit: cover;
}
.column-wrapper .flex-wrap .live-cover-zone {
  margin: 15px 0;
  width: 110px;
  height: 65px;
}
.column-wrapper .flex-wrap .live-cover-zone .cover-image {
  width: 110px;
  height: 65px;
  -o-object-fit: cover;
     object-fit: cover;
}
.column-wrapper .flex-wrap .i-option-title {
  padding: 15px 0;
  width: 34%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 34%;
          flex: 0 0 34%;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
  line-height: 20px;
}
.column-wrapper .flex-wrap .i-option-main {
  padding: 15px 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 60%;
          flex: 1 0 60%;
  max-width: 60%;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-align: right;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: transparent;
  border: none;
  outline: none;
}
.column-wrapper .avatar-list {
  width: 125px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  overflow: hidden;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.column-wrapper .avatar-list .a-item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 35px;
          flex: 0 0 35px;
  width: 35px;
  height: 35px;
}
.column-wrapper .avatar-list .a-item:not(:last-child) {
  margin-right: 10px;
}
.column-wrapper .avatar-list .a-item .avatar-img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.create-wrapper .create-main {
  min-height: 400px;
}
.create-wrapper .create-wrapper-footer {
  margin: 40px auto 30px;
  overflow: hidden;
  text-align: center;
}
.create-wrapper .create-wrapper-footer .btn {
  width: 60%;
  min-width: 200px;
  max-width: 350px;
  height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  background-color: #53aff2;
  border-radius: 5px;
  border: none;
  outline: none;
}
.not-create-zone {
  padding: 15px;
}
.not-create-zone .none-top {
  margin: 10px 0;
  overflow: hidden;
  text-align: center;
}
.not-create-zone .none-top .none-tip-img {
  width: 100px;
  vertical-align: top;
  margin-bottom: 10px;
}
.not-create-zone .none-top .none-tip {
  font-size: 14px;
  color: #999999;
  line-height: 20px;
}
.not-create-zone .create-btn {
  margin: 30px 0 40px;
  width: 100%;
  padding: 15px;
  line-height: 20px;
  border-radius: 5px;
  border: 1px solid #53aff2;
  background-color: #53aff2;
  font-size: 15px;
  color: #fff;
}
.not-create-zone .back-tips {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  font-size: 14px;
  color: #999999;
  line-height: 20px;
}
.not-create-zone .back-tips li {
  margin: 10px 0 10px 30px;
  list-style-type: square;
}
.alter-dialog {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.alter-dialog .center-main {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin: auto;
  height: 212px;
  width: 80%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.alter-dialog .center-main .dialog-content {
  padding: 20px 12px 0;
  background-color: #fff;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
  color: #404040;
}
.alter-dialog .center-main .dialog-content .title {
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
  margin: 0 0 20px 0;
}
.alter-dialog .center-main .dialog-content .text {
  margin: 0 0 20px 0;
  line-height: 20px;
  text-align: left;
  color: #999999;
}
.alter-dialog .center-main .dialog-content .textarea-zone {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.alter-dialog .center-main .dialog-content .textarea-zone .textarea-control {
  width: 100%;
  padding: 12px;
  height: 90px;
  border-radius: 5px;
  background-color: #edf3f9;
  border: 1px solid #edf3f9;
  font-size: 15px;
  color: #404040;
  text-align: left;
  word-wrap: break-word;
  outline: none;
}
.alter-dialog .center-main .dialog-content .textarea-zone .textarea-control::-webkit-input-placeholder {
  color: #999999;
}
.alter-dialog .center-main .dialog-content .textarea-zone .textarea-control.focusing,
.alter-dialog .center-main .dialog-content .textarea-zone .textarea-control:focus {
  border: 1px solid rgba(83, 175, 242, 0.6);
  -webkit-box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
          box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
}
.alter-dialog .center-main .dialog-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
}
.alter-dialog .center-main .dialog-footer > a {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-top: 1px solid #f2f2f2;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  padding: 12px 10px;
}
.alter-dialog .center-main .dialog-footer > a:last-child {
  border-left: 1px solid #f2f2f2;
}
.alter-dialog .center-main .dialog-footer .dialog-cancel-btn {
  color: #999999;
}
.alter-dialog .center-main .dialog-footer .dialog-confirm-btn {
  color: #108ee9;
}
.switch-list-mod {
  margin-bottom: 10px;
}
.switch-list-mod .switch-wrapper {
  padding: 15px;
  background-color: #fff;
}
.switch-list-mod .switch-wrapper .switch-zone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.switch-list-mod .switch-wrapper .switch-zone .switch-item-text {
  font-size: 15px;
  font-weight: 500;
  color: #404040;
}
.switch-list-mod .switch-wrapper .switch-input-zone {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.switch-list-mod .switch-wrapper .switch-input-zone .switch-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0 10px;
  height: 44px;
  border-radius: 5px;
  background-color: #edf3f9;
  border: 1px solid #edf3f9;
  font-size: 15px;
  color: #404040;
  outline: none;
}
.switch-list-mod .switch-wrapper .switch-input-zone .switch-input.start-time {
  padding-left: 40px;
  background: url(/res/images/lv-icon-time.png) 10px center no-repeat;
  background-size: 24px 24px;
}
.switch-list-mod .switch-wrapper .switch-input-zone .switch-input::-webkit-input-placeholder {
  color: #999999;
}
.switch-list-mod .switch-wrapper .switch-input-zone .switch-input.focusing,
.switch-list-mod .switch-wrapper .switch-input-zone .switch-input:focus {
  border: 1px solid rgba(83, 175, 242, 0.6);
  -webkit-box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
          box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
}
.switch-list-mod .switch-wrapper .switch-input-zone .input-suffix {
  margin-left: 15px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #999999;
}
.switch-list-mod .switch-illustrations {
  margin: 5px 15px 15px;
}
.switch-list-mod .switch-illustrations .p1 {
  margin: 2px auto 4px;
  font-size: 14px;
  line-height: 20px;
  color: #999999;
}
.created-input-list-mod {
  margin-bottom: 10px;
  background-color: #fff;
  overflow: hidden;
}
.created-input-list-mod > .item {
  padding: 15px 15px 0;
}
.created-input-list-mod > .item:last-child {
  padding-bottom: 20px;
}
.created-input-list-mod .creat-label {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.created-input-list-mod .creat-label .required {
  font-size: 18px;
  color: #f66;
}
.created-input-list-mod .creat-input {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  border-radius: 5px;
  background-color: #edf3f9;
  border: 1px solid #edf3f9;
  font-size: 15px;
  color: #404040;
  outline: none;
  -webkit-appearance: none;
}
.created-input-list-mod .creat-input.start-time {
  padding-left: 40px;
  background: #edf3f9 url(/res/images/lv-icon-time.png) 10px center no-repeat;
  background-size: 24px 24px;
}
.created-input-list-mod .creat-input.start-time[disabled=disabled] {
  -webkit-text-fill-color: #404040;
  -webkit-opacity: 1;
  opacity: 1;
  -webkit-appearance: none;
}
.created-input-list-mod .creat-input::-webkit-input-placeholder {
  color: #999999;
}
.created-input-list-mod .creat-input.focusing,
.created-input-list-mod .creat-input:focus {
  border: 1px solid rgba(83, 175, 242, 0.6);
  -webkit-box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
          box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
}
.created-input-list-mod .creat-textarea {
  width: 100%;
  height: 108px;
  padding: 10px;
  border-radius: 5px;
  background-color: #edf3f9;
  border: 1px solid #edf3f9;
  font-size: 15px;
  color: #404040;
  outline: none;
  -webkit-appearance: none;
}
.created-input-list-mod .creat-textarea::-webkit-input-placeholder {
  color: #999999;
}
.created-input-list-mod .creat-textarea.focusing,
.created-input-list-mod .creat-textarea:focus {
  border: 1px solid rgba(83, 175, 242, 0.6);
  -webkit-box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
          box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
}
.created-input-list-mod .create-input-desc {
  margin-top: 10px;
}
.created-input-list-mod .create-input-desc .p1 {
  margin: 5px 0;
  font-size: 13px;
  color: #999999;
  line-height: 20px;
  word-wrap: break-word;
}
.created-input-list-mod .preview-zone {
  text-align: center;
}
.created-input-list-mod .preview-zone .preview-img {
  display: block;
  margin: 20px auto;
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}
.create-wrapper-footer {
  margin: 40px auto 30px;
  overflow: hidden;
  text-align: center;
}
.create-wrapper-footer .btn {
  width: 60%;
  min-width: 200px;
  max-width: 350px;
  height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  background-color: #53aff2;
  border-radius: 5px;
  border: none;
  outline: none;
}
.create-wrapper-footer .btns-zone {
  margin: 0 8%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.create-wrapper-footer .btns-zone .btn {
  min-width: 65px;
  max-width: none;
  width: 42%;
}
.select-type-mod {
  padding: 15px 0 0;
  background-color: #fff;
  overflow: hidden;
}
.select-type-mod .select-title {
  margin: 0 15px 15px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #404040;
}
.select-type-mod .type-list {
  padding: 0 7.5px;
}
.select-type-mod .type-list .item {
  float: left;
  margin-bottom: 20px;
  width: 33.33%;
  padding: 0 7.5px;
  font-size: 15px;
  color: #999999;
  text-align: center;
  cursor: pointer;
  -webkit-transition: width .5s;
  transition: width .5s;
}
.select-type-mod .type-list .item .t-text {
  display: block;
  border-radius: 5px;
  border: solid 1px #d8d8d8;
  background-color: #fff;
  line-height: 26px;
}
.select-type-mod .type-list .item.on {
  color: #fff;
}
.select-type-mod .type-list .item.on .t-text {
  background-color: #53aff2;
  border: 1px solid #53aff2;
}
@media screen and (min-width: 374px) and (max-width: 430px) {
  .create-step-zone .select-type-mod .type-list .item {
    width: 25%;
  }
}
@media screen and (min-width: 430px) {
  .create-step-zone .select-type-mod .type-list .item {
    width: 20%;
  }
}
.create-account-dialog {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.create-account-dialog .center-main {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin: auto;
  height: 255px;
  width: 80%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.create-account-dialog .center-main .dialog-content {
  padding: 20px 15px 0;
  background-color: #fff;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
  color: #404040;
}
.create-account-dialog .center-main .dialog-content .title {
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
  margin: 0 0 20px 0;
}
.create-account-dialog .center-main .dialog-content .text {
  margin: 0 0 20px 0;
  line-height: 20px;
  text-align: left;
  color: #999999;
}
.create-account-dialog .center-main .dialog-content .input-control {
  width: 100%;
  padding: 0 12px;
  height: 35px;
  border-radius: 5px;
  background-color: #edf3f9;
  border: 1px solid #edf3f9;
  font-size: 15px;
  color: #404040;
  outline: none;
}
.create-account-dialog .center-main .dialog-content .input-control::-webkit-input-placeholder {
  color: #999999;
}
.create-account-dialog .center-main .dialog-content .input-control.focusing,
.create-account-dialog .center-main .dialog-content .input-control:focus {
  border: 1px solid rgba(83, 175, 242, 0.6);
  -webkit-box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
          box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
}
.create-account-dialog .center-main .dialog-content .phone-zone {
  margin-bottom: 10px;
  text-align: left;
  overflow: hidden;
}
.create-account-dialog .center-main .dialog-content .phone-zone .creat-label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 10px;
}
.create-account-dialog .center-main .dialog-content .phone-zone .input-zone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.create-account-dialog .center-main .dialog-content .phone-zone .input-zone .input-control {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 50%;
          flex: 1 0 50%;
}
.create-account-dialog .center-main .dialog-content .phone-zone .input-zone .send-cord-btn {
  margin-left: 15px;
  width: 80px;
  height: 30px;
  border: 1px solid #53aff2;
  background-color: #fff;
  border-radius: 5px;
  font-size: 13px;
  text-align: center;
  color: #53aff2;
  white-space: nowrap;
}
.create-account-dialog .center-main .dialog-content .phone-zone .input-zone .send-cord-btn[disabled=disabled] {
  color: #999999;
  border: 1px solid #999999;
}
.create-account-dialog .center-main .dialog-content .cord-zone {
  margin-bottom: 15px;
  text-align: left;
  overflow: hidden;
}
.create-account-dialog .center-main .dialog-content .cord-zone .creat-label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 10px;
}
.create-account-dialog .center-main .dialog-content .cord-zone .input-zone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.create-account-dialog .center-main .dialog-content .cord-zone .input-zone .input-control {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
}
.create-account-dialog .center-main .dialog-content .cord-zone .input-zone .send-cord-btn {
  margin-left: 15px;
  height: 30px;
  border: 1px solid #53aff2;
  background-color: #fff;
  border-radius: 5px;
  font-size: 13px;
  text-align: center;
  color: #53aff2;
  white-space: nowrap;
}
.create-account-dialog .center-main .dialog-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
}
.create-account-dialog .center-main .dialog-footer > a {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-top: 1px solid #f2f2f2;
  font-size: 15px;
  text-align: center;
  padding: 12px 10px;
}
.create-account-dialog .center-main .dialog-footer > a:last-child {
  border-left: 1px solid #f2f2f2;
}
.create-account-dialog .center-main .dialog-footer .dialog-cancel-btn {
  color: #999999;
}
.create-account-dialog .center-main .dialog-footer .dialog-confirm-btn {
  color: #108ee9;
}
/* 设置管理员 */
.live-setting-admin {
  overflow: hidden;
  padding: 0 0 40px 0;
}
.live-setting-admin .creater-box {
  padding: 12px 15px 0;
  margin-bottom: 15px;
  background-color: #fff;
}
.live-setting-admin .lssd-hd {
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  color: #999999;
}
.live-setting-admin .lssd-pline {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px 0 10px;
}
.live-setting-admin .lssd-pline + .lssd-pline {
  border-top: 1px solid #e8e8e8;
}
.live-setting-admin .lssd-pline .lssd-data-img {
  margin-right: 10px;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.live-setting-admin .lssd-pline .lssd-data-name {
  margin-right: 15px;
  -moz-flex: 1;
  -ms-flex: 1;
  -o-flex: 1;
  -webkit-box-flex: 1;
          flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-setting-admin .lssd-pline .data-del-btn {
  width: 70px;
  height: 30px;
  background-color: #ff4c52;
  border-radius: 5px;
  font-size: 13px;
  color: #fff;
  font-weight: 400;
  border: none;
  outline: none;
}
.live-setting-admin .administrator-box,
.live-setting-admin .guest-box {
  padding: 12px 15px 0;
  background-color: #fff;
}
.live-btn {
  display: block;
  margin: 15px auto 20px;
  padding: 0;
  height: 45px;
  line-height: 45px;
  width: 86%;
  max-width: 400px;
  background-color: #53aff2;
  -webkit-box-shadow: 0 0 9px 0 rgba(16, 141, 233, 0.43);
          box-shadow: 0 0 9px 0 rgba(16, 141, 233, 0.43);
  border: none;
  border-radius: 50px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  outline: none;
}
.wrapper-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  padding: 10px;
  min-width: 320px;
  max-width: 640px;
  margin: auto;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.wrapper-box .invite-box {
  width: 100%;
  min-height: 100%;
  background-color: #fff;
  border: 1px solid #fff;
}
.wrapper-box .creater-img {
  display: block;
  margin: 50px auto 15px;
  width: 89px;
  height: 89px;
  overflow: hidden;
  border-radius: 50%;
  -webkit-box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.19);
  border: solid 2px #ffffff;
  -o-object-fit: cover;
     object-fit: cover;
}
.wrapper-box .creater-name {
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #999999;
}
.wrapper-box .invite-live {
  margin: 30px 20px 50px;
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #999999;
  text-align: center;
}
.wrapper-box .invite-live a {
  color: #108ee9;
}
.wrapper-box .invite-intro {
  padding: 22px;
}
.wrapper-box .invite-intro p {
  margin: 10px 0;
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #999999;
}
.wrapper-box .accept-role {
  margin: 30px 20px 60px;
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #404040;
}
.wrapper-box .accept-btn {
  display: block;
  padding: 12px 15px;
  width: 57.74647887%;
  max-width: 350px;
  height: 44px;
  text-align: center;
  background-color: #29a1f7;
  border: none;
  color: #fff;
  font-size: 15px;
  border-radius: 5px;
  margin: 0 auto;
  outline: none;
}
.wrapper-box .accept-btn[disabled=disabled] {
  background-color: #e5e5e5;
  color: #fff;
}
.wrapper-box .live-name {
  display: block;
  margin: 0 .5rem;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wrapper-box .invite-url {
  width: 100%;
  padding: 10px 12px;
  height: 80px;
  border-radius: 5px;
  background-color: #edf3f9;
  border: 1px solid #edf3f9;
  font-size: 15px;
  line-height: 20px;
  color: #404040;
  cursor: pointer;
  word-wrap: break-word;
}
.live-info-wrapper {
  position: relative;
  margin-bottom: 10px;
  padding: 12px 15px;
  background-color: #fff;
  overflow: hidden;
}
.live-info-wrapper .belongs-series {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
  color: #404040;
}
.live-info-wrapper .belongs-series .turn-to {
  color: #404040;
}
.live-info-wrapper .info-container .cover-zone {
  float: left;
  width: 100px;
  height: 100px;
}
.live-info-wrapper .info-container .cover-zone .cover-img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.live-info-wrapper .info-container .info-main {
  position: relative;
  margin-left: 112px;
  min-height: 100px;
}
.live-info-wrapper .info-container .info-main .lv-name {
  display: block;
  margin-bottom: 18px;
  min-height: 48px;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  color: #404040;
  overflow: hidden;
  word-wrap: break-word;
}
.live-info-wrapper .info-container .info-main .lv-name .text {
  display: none;
}
.live-info-wrapper .info-container .info-main .lv-name.audio {
  position: relative;
}
.live-info-wrapper .info-container .info-main .lv-name.audio .text {
  display: block;
  text-indent: 2.2em;
}
.live-info-wrapper .info-container .info-main .lv-name.audio .icon {
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  width: 32px;
  height: 18px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  line-height: 18px;
  background-color: #ff4c52;
  border-radius: 2px;
  text-indent: 0;
}
.live-info-wrapper .info-container .info-main .extra-info {
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 14px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-info-wrapper .info-container .info-main .learned {
  font-size: 12px;
  line-height: 14px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-info-wrapper .info-container .desc-zone {
  margin-top: 13px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.live-info-wrapper .info-container .desc-zone .item {
  padding-left: 15px;
  font-size: 12px;
  line-height: 14px;
  color: #999999;
  background: url(/res/images/lv-icon-st.png) left center no-repeat;
  background-size: 12px 12px;
}
.live-info-wrapper .info-container .desc-zone .item:not(:last-child) {
  margin-right: 12px;
}
.live-info-wrapper .account-info {
  padding: 10px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid #f2f2f2;
}
.live-info-wrapper .account-info .info-tit {
  font-size: 14px;
  line-height: 20px;
  color: #999999;
}
.live-info-wrapper .account-info .info-tit .account-name {
  color: #108ee9;
}
.live-info-wrapper .account-info .follow-account-btn {
  margin-left: 12px;
  width: 60px;
  height: 24px;
  border-radius: 5px;
  border: solid 1px #999999;
  background-color: transparent;
  outline: none;
  font-size: 12px;
  color: #999999;
}
.live-info-wrapper .handle-wrapper {
  padding-top: 15px;
}
.live-info-wrapper .handle-wrapper .btns-zone {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.live-info-wrapper .handle-wrapper .btns-zone .buy-btn {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  height: 42px;
  border-radius: 5px;
  background-color: #ff4c52;
  border: 1px solid #ff4c52;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
}
.live-info-wrapper .handle-wrapper .btns-zone .turn-btn {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  height: 42px;
  border-radius: 5px;
  background-color: #108ee9;
  border: 1px solid #108ee9;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
}
.live-info-wrapper .handle-wrapper .btns-zone .disabled-btn {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  height: 42px;
  border-radius: 5px;
  background-color: #e3e3e3;
  border: 1px solid #e3e3e3;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}
.live-info-wrapper .handle-wrapper .btns-zone .default-btn {
  display: block;
  height: 42px;
  padding: 0 12px;
  border-radius: 5px;
  background-color: #535353;
  border: 1px solid #535353;
  text-align: center;
  font-size: 0;
  line-height: 40px;
  font-weight: 500;
  color: #fff;
  vertical-align: middle;
}
.live-info-wrapper .handle-wrapper .btns-zone .default-btn .icon {
  margin-right: 3px;
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  background: url(/res/images/lv-icon-add.png) center center no-repeat;
  background-size: cover;
}
.live-info-wrapper .handle-wrapper .btns-zone .default-btn .text {
  vertical-align: middle;
  font-size: 17px;
}
.live-info-wrapper .handle-wrapper .btns-zone .btn-left {
  border-radius: 5px 0 0 5px;
}
.live-info-wrapper .handle-wrapper .btns-zone .btn-right {
  border-radius: 0 5px 5px 0;
}
.live-info-wrapper .handle-wrapper .handler-zone {
  margin-top: 15px;
}
.live-info-wrapper .handle-wrapper .handler-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.live-info-wrapper .handle-wrapper .handler-list .item {
  padding: 3px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  cursor: pointer;
}
.live-info-wrapper .handle-wrapper .handler-list .item > a {
  display: block;
}
.live-info-wrapper .handle-wrapper .handler-list .item .icon-zone {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  position: relative;
}
.live-info-wrapper .handle-wrapper .handler-list .item .icon {
  position: relative;
  width: 24px;
  height: 24px;
  vertical-align: top;
}
.live-info-wrapper .handle-wrapper .handler-list .item .text {
  display: block;
  margin-top: 4px;
  height: 16px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #999999;
}
.live-info-wrapper .slider-share-zone {
  position: absolute;
  right: 0;
  top: 69px;
  z-index: 10;
  width: 100%;
  height: 0;
  max-width: 640px;
}
.live-info-wrapper .slider-share-zone.fixed {
  position: fixed;
  left: 0;
  right: 10px;
  top: 0;
  margin: auto;
  z-index: 10;
}
.live-info-wrapper .slider-share {
  position: absolute;
  right: 6px;
  top: 0;
  z-index: 10;
  width: 35px;
  height: 44px;
  display: block;
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
}
.live-info-wrapper .slider-share .icon-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  font-size: 18px;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border-top-right-radius: 4px;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 10px #ccc;
          box-shadow: 0 2px 10px #ccc;
  text-align: center;
  border: 3px solid #ececec;
  color: #f7aa1c;
}
.live-info-wrapper .slider-share .icon-wrap .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 2px;
  -webkit-animation: shareCardShake linear 4s infinite;
          animation: shareCardShake linear 4s infinite;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.live-info-wrapper .slider-share .label-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  overflow: hidden;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  white-space: nowrap;
}
.live-info-wrapper .slider-share .label-wrap label {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding-left: 15px;
  padding-right: 20px;
  background-color: rgba(240, 240, 240, 0.8);
  color: #666;
  font-size: 12px;
  vertical-align: top;
  border-top-left-radius: 27px;
  border-bottom-left-radius: 27px;
  line-height: 24px;
  -webkit-box-shadow: 0 2px 7px rgba(102, 102, 102, 0.4);
          box-shadow: 0 2px 7px rgba(102, 102, 102, 0.4);
  -webkit-animation: shareCardLabel ease-out 0.3s;
          animation: shareCardLabel ease-out 0.3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  cursor: pointer;
}
.live-info-wrapper .info-price-zone {
  margin-top: 15px;
}
.live-info-wrapper .info-price-zone .price-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.live-info-wrapper .info-price-zone .new-price {
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  color: #ff4c52;
}
.live-info-wrapper .info-price-zone .spec-icon {
  display: block;
  padding: 0 3px;
  margin-right: 10px;
  border-radius: 2px;
  height: 16px;
  line-height: 16px;
  background-color: #ff4c52;
  font-size: 10px;
  color: #fff;
}
.live-info-wrapper .info-price-zone .ori-price {
  display: block;
  margin-left: 20px;
  font-size: 12px;
  line-height: 16px;
  color: #999999;
  text-decoration: line-through;
}
.ld-account-zone {
  margin: 10px 0;
  padding: 0 15px;
  background-color: #fff;
  overflow: hidden;
}
.ld-account-zone .account-zone {
  padding: 10px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.ld-account-zone .account-zone .info-zone {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ld-account-zone .account-zone .info-zone .cover-zone {
  float: left;
  min-width: 38px;
  width: 38px;
  height: 38px;
  margin-right: 10px;
  overflow: hidden;
}
.ld-account-zone .account-zone .info-zone .cover-zone .cover-img {
  min-width: 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.ld-account-zone .account-zone .info-zone .name {
  margin-left: 48px;
  font-size: 14px;
  line-height: 24px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ld-account-zone .account-zone .info-zone .follow-num {
  margin-left: 48px;
  font-size: 12px;
  line-height: 14px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ld-account-zone .account-zone .follow-btn {
  width: 60px;
  height: 24px;
  padding: 0;
  border-radius: 5px;
  background-color: transparent;
  border: solid 1px #999999;
  outline: none;
  font-size: 12px;
  color: #999999;
  text-align: center;
}
.ld-account-zone .account-zone .follow-btn.followed {
  background-color: #eff2f4;
  border: solid 1px #eff2f4;
  color: #919ca9;
}
.ld-account-zone .belongs-series {
  display: block;
  padding: 10px 0;
  border-top: 1px solid #f2f2f2;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ld-account-zone .belongs-series .series-name {
  color: #459eee;
}
.lv-detail-model {
  margin: 10px 0;
  background-color: #fff;
  overflow: hidden;
}
.lv-detail-model .detail-header {
  margin: 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.lv-detail-model .detail-header .lv-detail-title {
  padding: 12px 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  color: #404040;
}
.lv-detail-model .detail-header .turn-btn {
  display: block;
  width: 67px;
  height: 30px;
  line-height: 28px;
  border-radius: 5px;
  border: solid 1px #108ee9;
  text-align: center;
  color: #108ee9;
}
.lv-detail-model .detail-header .right-btn {
  display: block;
  width: 67px;
  height: 30px;
  background-color: transparent;
  border: none;
  outline: none;
}
.lv-detail-model .detail-header .right-btn .icon {
  width: 24px;
  height: 24px;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.lv-detail-model .lv-model-main {
  padding: 0 15px 20px;
}
.lv-detail-model .lv-model-main .agreement-content {
  font-size: 14px;
  line-height: 22px;
  color: #707070;
}
.lv-detail-model .lv-model-main .qr-zone {
  text-align: center;
  vertical-align: top;
}
.lv-detail-model .lv-model-main .qr-zone .qr-pic {
  padding: 20px 30% 10px;
}
.lv-detail-model .lv-model-main .qr-zone .qr-text {
  font-size: 14px;
  line-height: 24px;
  color: #707070;
}
.lv-detail-model .toggle-btn {
  display: block;
  width: 100%;
  padding: 3px;
  background-color: transparent;
  border: none;
  outline: none;
  text-align: center;
}
.lv-detail-model .toggle-btn .icon {
  width: 24px;
  vertical-align: top;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.lv-detail-model .toggle-btn.open .icon {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}
.lv-detail-model .live-article {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.lv-detail-model .live-article::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 210px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(60%, rgba(255, 255, 255, 0.3)), color-stop(80%, rgba(255, 255, 255, 0.7)), color-stop(99%, rgba(255, 255, 255, 0.98)), to(#ffffff));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.7) 80%, rgba(255, 255, 255, 0.98) 99%, #ffffff);
}
.lv-detail-model .live-article.show-all {
  height: auto;
}
.lv-detail-model .live-article.show-all::before {
  display: none;
}
.lv-detail-model .catalog-list .item {
  padding: 12px 0;
}
.lv-detail-model .catalog-list .item:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.lv-detail-model .catalog-list .item .type-item {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 20px;
  color: #707070;
}
.lv-detail-model .catalog-list .item .type-item::before {
  content: '';
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  width: 4px;
  height: 14px;
  background-color: #f67276;
}
.lv-detail-model .catalog-list .flex-navigat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.lv-detail-model .catalog-list .flex-navigat .order-num {
  margin-right: 5px;
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25px;
          flex: 0 0 25px;
  width: 25px;
  height: 24px;
  line-height: 24px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: #404040;
}
.lv-detail-model .catalog-list .flex-navigat .live-coverimg {
  margin-right: 10px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 60px;
          flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 5px;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.lv-detail-model .catalog-list .flex-navigat .live-info-main {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 60px;
  overflow: hidden;
}
.lv-detail-model .catalog-list .flex-navigat .live-info-main .live-name {
  margin-bottom: 6px;
  min-height: 40px;
  max-height: 40px;
  height: 40px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #404040;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lv-detail-model .catalog-list .flex-navigat .live-info-main .start-time,
.lv-detail-model .catalog-list .flex-navigat .live-info-main .learned {
  font-size: 12px;
  line-height: 14px;
  color: #999999;
}
.lv-detail-model .catalog-list .flex-navigat .live-info-main .start-time {
  display: inline-block;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lv-detail-model .catalog-list .flex-navigat .live-info-main .set-btn {
  display: none;
  position: absolute;
  right: -15px;
  bottom: 7px;
  z-index: 10;
  padding: 10px 15px;
  background-color: transparent;
  border: none;
}
.lv-detail-model .catalog-list .flex-navigat .live-info-main .set-btn .icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
.lv-detail-model .catalog-list .flex-navigat .live-info-main .set-btn .text {
  font-size: 12px;
  line-height: 24px;
  color: #999999;
  vertical-align: middle;
}
.lv-detail-model .catalog-list .flex-navigat .live-info-main.admin .live-name {
  padding-right: 55px;
}
.lv-detail-model .catalog-list .flex-navigat .live-info-main.admin .set-btn {
  display: block;
}
.lv-detail-model .catalog-list .flex-navigat.live-clas .live-info-main .live-name,
.lv-detail-model .catalog-list .flex-navigat.featured-clas .live-info-main .live-name {
  position: relative;
  text-indent: 2.5em;
  display: block;
}
.lv-detail-model .catalog-list .flex-navigat.live-clas .live-info-main .live-name::before,
.lv-detail-model .catalog-list .flex-navigat.featured-clas .live-info-main .live-name::before {
  content: '直播';
  position: absolute;
  left: 0;
  top: 2px;
  display: block;
  padding: 0 3px;
  height: 16px;
  background-color: #FE9630;
  border-radius: 2px;
  font-size: 12px;
  color: #fff;
  line-height: 16px;
  text-indent: 0;
  text-align: center;
}
.lv-detail-model .catalog-list .flex-navigat.featured-clas .live-info-main .live-name::before {
  content: '精品';
  background-color: #ff4c52;
}
.detail-toptoolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  margin: 0 auto;
  padding: 0 15px;
  min-width: 320px;
  max-width: 640px;
  height: 50px;
  background-color: #f4f6f8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.detail-toptoolbar .handler-zone {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.detail-toptoolbar .handler-zone .handler-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.detail-toptoolbar .handler-zone .handler-list .item {
  padding: 10px 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  cursor: pointer;
}
.detail-toptoolbar .handler-zone .handler-list .item > a {
  display: block;
}
.detail-toptoolbar .handler-zone .handler-list .item .icon {
  width: 24px;
  vertical-align: top;
}
.detail-toptoolbar .info-detail-zone {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.detail-toptoolbar .info-detail-zone .price-zone {
  font-size: 17px;
  color: #ff4c52;
  line-height: 24px;
  font-weight: 400;
}
.detail-toptoolbar .info-detail-zone .learned-zone {
  font-size: 12px;
  color: #999999;
  line-height: 17px;
  font-weight: 400;
}
.detail-toptoolbar .info-detail-zone .details-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.detail-toptoolbar .info-detail-zone .details-list .item {
  margin-right: 10px;
}
.detail-toptoolbar .buy-btn {
  width: 30.98591549%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30.98591549%;
          flex: 0 0 30.98591549%;
  min-width: 93px;
  margin-left: 10px;
  padding: 0;
  height: 34px;
  border-radius: 5px;
  background-color: #ff4c52;
  border: none;
  outline: none;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
}
.detail-toptoolbar .turn-btn {
  width: 30.98591549%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30.98591549%;
          flex: 0 0 30.98591549%;
  min-width: 93px;
  margin-left: 10px;
  padding: 0;
  height: 34px;
  border-radius: 5px;
  background-color: #108ee9;
  border: none;
  outline: none;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
}
.detail-toptoolbar .full-buy-btn {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 93px;
  margin-left: 10px;
  padding: 0;
  height: 34px;
  border-radius: 5px;
  background-color: #ff4c52;
  border: none;
  outline: none;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
}
.more-control-dialog {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  min-width: 320px;
  max-width: 640px;
  margin: auto;
}
.more-control-dialog .dialog-bottomMain {
  background-color: #fff;
}
.more-control-dialog .dialog-bottomMain .dialog-title {
  margin: 0 10%;
  padding: 15px 0;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  color: #108ee9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.more-control-dialog .control-tool-list {
  width: 100%;
  height: 100%;
  padding: .3rem .3rem 0;
  background-color: #f2f2f2;
  font-size: 0;
}
.more-control-dialog .control-tool-list .item {
  display: inline-block;
  width: 25%;
  margin-bottom: .4rem;
  text-align: center;
}
.more-control-dialog .control-tool-list .item .icon {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 auto 10px;
}
.more-control-dialog .control-tool-list .item .text {
  font-size: 12px;
  text-align: center;
  color: #999999;
  line-height: 12px;
}
.more-control-dialog .close-dialog {
  width: 100%;
  height: 50px;
  background-color: #fff;
  border: none;
  outline: none;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
  cursor: pointer;
}
.account-header {
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
}
.account-header .account-hdbg-zone {
  position: relative;
  width: 100%;
  height: 3rem;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
}
.account-header .account-hdbg-zone:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.account-header .account-hdbg-zone .account-bg {
  width: 120%;
  max-width: none;
  margin: -32% -10%;
  -webkit-filter: blur(10px);
          filter: blur(10px);
}
.account-header .account-main {
  position: relative;
  z-index: 1;
  width: 94.66666667%;
  max-width: 355px;
  min-height: 3rem;
  margin: -1.5rem auto 0;
  padding: 12px 24px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #fff;
  -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
}
.account-header .account-main .account-avatar-zone {
  position: absolute;
  top: -35px;
  left: 50%;
  margin-left: -32px;
  width: 63px;
  height: 63px;
  overflow: hidden;
}
.account-header .account-main .account-avatar-zone .account-avatar {
  width: 60px;
  height: 60px;
  border: 1.5px solid #fff;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.account-header .account-main .account-title {
  margin: 25px auto 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: #313131;
  text-align: center;
}
.account-header .account-main .account-follow-num {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.33;
  color: #999999;
  text-align: center;
}
.account-header .account-main .account-desc {
  font-size: 14px;
  line-height: 20px;
  color: #878787;
}
.account-header .account-main .follow-btn {
  display: block;
  margin: 15px auto;
  width: 30%;
  height: 25px;
  border-radius: 100px;
  border: solid 1px #108ee9;
  background-color: transparent;
  color: #108ee9;
  font-size: 12px;
  font-weight: 400;
}
.account-header .account-main .follow-btn.followed {
  border: solid 1px #999999;
  background-color: transparent;
  color: #999999;
}
.account-header .edit-btn {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  padding: 10px 15px 10px 7px;
  background-color: transparent;
  border: none;
  outline: none;
}
.account-header .edit-btn .icon {
  display: block;
  width: 24px;
  margin: 0 auto 2px;
}
.account-header .edit-btn .text {
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: #ffffff;
}
.account-header .subscribe-btn {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  padding: 10px 15px 10px 7px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: transparent;
  border: none;
  outline: none;
}
.account-header .subscribe-btn .icon {
  display: block;
  min-width: 18px;
  width: 18px;
  height: 18px;
  margin-right: 2px;
}
.account-header .subscribe-btn .text {
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: #ffffff;
}
.account-header .manage-btn {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  padding: 10px 15px;
  background-color: transparent;
  border: none;
  outline: none;
}
.account-header .manage-btn .icon {
  display: block;
  width: 24px;
  margin: 0 auto 2px;
}
.account-header .manage-btn .text {
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: #ffffff;
}
.account-header .statement-btn {
  position: absolute;
  left: 60px;
  top: 0;
  z-index: 10;
  padding: 10px 15px;
  background-color: transparent;
  border: none;
  outline: none;
}
.account-header .statement-btn .icon {
  display: block;
  width: 24px;
  margin: 0 auto 2px;
}
.account-header .statement-btn .text {
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: #ffffff;
}
.account-header .show-search-btn {
  position: absolute;
  right: 48px;
  top: 0;
  z-index: 10;
  padding: 10px 7px 10px 15px;
  background-color: transparent;
  border: none;
  outline: none;
}
.account-header .show-search-btn .icon {
  display: block;
  width: 24px;
  margin: 0 auto 2px;
}
.account-header .show-search-btn .text {
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: #ffffff;
}
.urlshow-dialog {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  z-index: 1010;
}
.urlshow-dialog .center-wrapper {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
}
.urlshow-dialog .center-main {
  margin: auto;
  width: 80%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.urlshow-dialog .center-main .dialog-content {
  padding: 20px 12px 0;
  background-color: #fff;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
  color: #404040;
}
.urlshow-dialog .center-main .dialog-content .title {
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
  margin: 0 0 20px 0;
}
.urlshow-dialog .center-main .dialog-content .text {
  margin: 0 0 20px 0;
  line-height: 20px;
  text-align: left;
  color: #999999;
}
.urlshow-dialog .center-main .dialog-content .textarea-zone {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.urlshow-dialog .center-main .dialog-content .textarea-zone .textarea-label {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #404040;
  text-align: left;
}
.urlshow-dialog .center-main .dialog-content .textarea-zone .right-btn {
  position: absolute;
  right: 0;
  top: -10px;
  z-index: 1;
  display: block;
  padding: 10px;
  border: none;
  outline: none;
  font-size: 14px;
  line-height: 20px;
  color: #108ee9;
  background-color: transparent;
}
.urlshow-dialog .center-main .dialog-content .textarea-zone .textarea-control {
  width: 100%;
  padding: 12px;
  min-height: 44px;
  border-radius: 5px;
  background-color: #edf3f9;
  border: 1px solid #edf3f9;
  font-size: 15px;
  line-height: 20px;
  color: #404040;
  text-align: left;
  word-wrap: break-word;
  outline: none;
  -webkit-appearance: none;
}
.urlshow-dialog .center-main .dialog-content .textarea-zone .textarea-control::-webkit-input-placeholder {
  color: #999999;
}
.urlshow-dialog .center-main .dialog-content .textarea-zone .textarea-control.focusing,
.urlshow-dialog .center-main .dialog-content .textarea-zone .textarea-control:focus {
  border: 1px solid rgba(83, 175, 242, 0.6);
  -webkit-box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
          box-shadow: 0 0 10px 2px rgba(83, 175, 242, 0.3);
}
.urlshow-dialog .center-main .dialog-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
}
.urlshow-dialog .center-main .dialog-footer > a {
  padding: 12px 10px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-top: 1px solid #f2f2f2;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}
.urlshow-dialog .center-main .dialog-footer > a:last-child {
  border-left: 1px solid #f2f2f2;
}
.urlshow-dialog .center-main .dialog-footer .dialog-cancel-btn {
  color: #999999;
}
.urlshow-dialog .center-main .dialog-footer .dialog-confirm-btn {
  color: #108ee9;
}
/* 分享提示 弹窗 */
.share-fir-dialog {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.share-fir-dialog .dialog-main {
  width: 80%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  vertical-align: middle;
}
.share-fir-dialog .dialog-main .dialog-content {
  padding: 20px 24px;
  font-size: 15px;
  line-height: 22px;
  color: #999999;
}
.share-fir-dialog .dialog-main .dialog-content > img {
  width: 22px;
  height: 22px;
}
.share-fir-dialog .dialog-main .dialog-footer {
  padding: 12px;
  height: 44px;
  font-size: 15px;
  line-height: 20px;
  color: #108ee9;
  border-top: 1px solid #f2f2f2;
  text-align: center;
  cursor: pointer;
}
.choose-pay-dialog {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.choose-pay-dialog .dialog-bg {
  overflow: hidden;
}
.choose-pay-dialog .dialog-bottomMain {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  background-color: #fff;
}
.choose-pay-dialog .dialog-footer {
  padding: 6px 15px;
  border-top: 1px solid #f2f2f2;
}
.choose-pay-dialog .dialog-footer .btn {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0;
  border-radius: 5px;
  background-color: transparent;
  border: 1px solid transparent;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  line-height: 40px;
  color: #fff;
  outline: none;
  cursor: pointer;
}
.choose-pay-dialog .dialog-footer .btn.buy-btn {
  background-color: #ff4c52;
  border: 1px solid #ff4c52;
}
.choose-pay-dialog .dialog-footer .btn.confirm-btn {
  background-color: #108ee9;
  border: 1px solid #108ee9;
}
.choose-pay-dialog .pay-type-list .pay-item:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.choose-pay-dialog .pay-type-list .pay-item .out-main {
  padding: 14px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.choose-pay-dialog .pay-type-list .pay-item .out-main .type-text {
  margin-right: 20px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: .3rem;
  font-weight: 500;
  line-height: 20px;
  color: #404040;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.choose-pay-dialog .pay-type-list .pay-item .out-main .type-price-zone {
  font-size: 14px;
  line-height: 20px;
}
.choose-pay-dialog .pay-type-list .pay-item .out-main .type-price-zone .pay {
  color: #ff4c52;
}
.choose-pay-dialog .pay-type-list .pay-item .out-main .type-price-zone .ori {
  font-size: 12px;
  color: #999999;
  text-decoration: line-through;
}
.choose-pay-dialog .pay-type-list .pay-item .inner-main {
  max-height: 4rem;
  padding: 0 15px;
  background-color: #f8f8f8;
  overflow: hidden;
  overflow-y: auto;
}
.choose-pay-dialog .pay-type-list .pay-item .inner-main .live-zone li:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.choose-pay-dialog .pay-type-list .pay-item .inner-main .live-zone .first-item,
.choose-pay-dialog .pay-type-list .pay-item .inner-main .live-zone .live-item {
  padding: 10px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: #404040;
}
.choose-pay-dialog .pay-type-list .pay-item .inner-main .live-zone .first-item .live-name,
.choose-pay-dialog .pay-type-list .pay-item .inner-main .live-zone .live-item .live-name {
  margin-right: 20px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: .3rem;
  line-height: 20px;
  font-weight: 400;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.choose-pay-dialog .pay-type-list .pay-item .inner-main .live-zone .first-item .save-price,
.choose-pay-dialog .pay-type-list .pay-item .inner-main .live-zone .live-item .save-price {
  min-width: 65px;
  height: 26px;
  padding: 0 5px;
  border-radius: 5px;
  border: solid 1px #ff4c52;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  color: #ff4c52;
}
.choose-pay-dialog .pay-type-list .pay-item .inner-main .live-zone .first-item {
  color: #999999;
}
.choose-pay-dialog .pay-type-list .pay-item .inner-main .live-zone .first-item .live-name {
  font-size: 12px;
}
.choose-pay-dialog .pay-type-list .pay-item .inner-main .live-zone .type-price-zone {
  font-size: 14px;
  line-height: 20px;
}
.choose-pay-dialog .pay-type-list .pay-item .inner-main .live-zone .type-price-zone .pay {
  color: #ff4c52;
}
.choose-pay-dialog .pay-type-list .pay-item .inner-main .live-zone .type-price-zone .ori {
  font-size: 12px;
  color: #999999;
  text-decoration: line-through;
}
/* 没有内容 */
.lvcc-noline {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.lvcc-noline .lvcc-nlimg {
  display: block;
  margin: 2.6rem auto .5rem;
  width: 1.28rem;
}
.lvcc-noline .lvcc-nltext {
  margin: .4rem;
  font-size: .3rem;
  font-weight: 400;
  line-height: .4rem;
  color: #999999;
  text-align: center;
}
.lvcc-noline .lvcc-checkmore-btn {
  display: block;
  width: 4.1rem;
  height: .8rem;
  margin: .4rem auto;
  line-height: .8rem;
  border-radius: 5px;
  background-color: #29a1f7;
  color: #fff;
  text-align: center;
  font-weight: 300;
  font-size: .3rem;
}
.ls-invit-zone {
  position: relative;
  height: 148px;
  background-color: #fff;
}
.ls-invit-zone .header-title {
  position: relative;
}
.ls-invit-zone .header-title .bg-img {
  position: absolute;
  left: 0;
  top: -2px;
  width: 102px;
}
.ls-invit-zone .header-title .text {
  position: relative;
  z-index: 1;
  padding: 0 15px;
  font-size: 15px;
  font-weight: 500;
  line-height: 34px;
  color: #ffffff;
}
.ls-invit-zone .qr-img-box {
  position: relative;
  z-index: 10;
  margin: -35px auto -20px;
  text-align: center;
}
.ls-invit-zone .qr-img-box img {
  padding: 10px 40px 20px;
}
.ls-invit-zone .tip-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  margin: auto;
  text-align: center;
  font-size: 14px;
  line-height: 1.64;
  color: #707070;
}
.shop-sale-not-centent {
  margin: 50px auto 20px;
}
.verification-dialog {
  display: block;
}
.verification-dialog .dialog-main {
  width: 86%;
  border-radius: 5px;
  background-color: #fff;
}
.verification-dialog .dialog-content {
  padding: 20px 12px 10px;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
  color: #404040;
}
.verification-dialog .dialog-content .title {
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
  margin: 0 0 20px 0;
}
.verification-dialog .textarea-zone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 44px;
  margin-bottom: 10px;
}
.verification-dialog .textarea-zone .textarea-label {
  width: 90px;
  min-width: 90px;
  padding-right: 10px;
  font-size: 12px;
  font-weight: 400;
  text-align: right;
  line-height: 22px;
  color: #404040;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.verification-dialog .textarea-zone .textarea-control {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 43px;
  border-bottom: 1px solid #f2f2f2;
  overflow: hidden;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 14px;
  color: #404040;
}
.verification-dialog .textarea-zone .textarea-control::-webkit-input-placeholder {
  color: #999999;
}
.verification-dialog .textarea-zone .textarea-control:-ms-input-placeholder {
  color: #999999;
}
.verification-dialog .textarea-zone .textarea-control::-ms-input-placeholder {
  color: #999999;
}
.verification-dialog .textarea-zone .textarea-control::placeholder {
  color: #999999;
}
.verification-dialog .textarea-zone .send-btn {
  display: block;
  padding: 2px 4px;
  border-radius: 5px;
  border: 1px solid #108ee9;
  background-color: transparent;
  color: #108ee9;
  font-size: 12px;
}
.verification-dialog .dialog-footer {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
}
.verification-dialog .dialog-footer > a {
  display: block;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  border-top: 1px solid #f2f2f2;
  font-size: 15px;
  text-align: center;
  padding: 14px 10px;
}
.verification-dialog .dialog-footer > a:not(:last-child) {
  border-right: 1px solid #f2f2f2;
}
.verification-dialog .dialog-footer .dialog-cancel-btn {
  color: #999999;
}
.verification-dialog .dialog-footer .dialog-confirm-btn {
  color: #108ee9;
}
/* 直播分类 */
.live-series-clas .lvsrcl-hd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.33;
  color: #404040;
}
.live-series-clas .lvsrcl-hd .ico-t {
  margin: 0 5px;
  width: 12px;
  height: 12px;
}
.live-series-clas .lvsrcl-body {
  background-color: #fff;
  padding: 15px;
}
.live-series-clas .clas-list > li + li {
  margin: 15px 0 0 0;
}
.live-series-clas .clas-list > .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.live-series-clas .clas-list > .item > .blo-flex1-box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
}
.live-series-clas .clas-list > .item > .blo-flex1-box .clas-inp {
  height: 35px;
  padding-left: 10px;
  font-size: 15px;
  font-weight: 400;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
}
.live-series-clas .clas-list > .item > .blo-flex1-box .live-coverpic {
  float: left;
  width: 85px;
  height: 1rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.live-series-clas .clas-list > .item > .blo-flex1-box .live-name {
  margin: 0 10px 0 95px;
  padding: 10px 0;
  line-height: 30px;
  font-size: 14px;
  color: #404040;
  font-weight: 400;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-series-clas .clas-list > .item .clas-opabtn {
  width: 35px;
  height: 35px;
  text-align: center;
  border: 0 none;
  background-color: transparent;
}
.live-series-clas .clas-list > .item .clas-opabtn + .clas-opabtn {
  margin: 0 0 0 5px;
}
.live-series-clas .clas-list > .item .clas-opabtn .ico-t {
  width: 14px;
  height: 14px;
}
.live-series-clas .la-navbar-ts {
  width: 100%;
  height: 49px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0 auto;
  padding: 0 15px 5px;
  min-width: 320px;
  max-width: 640px;
  font-size: 14px;
}
.live-series-clas .la-navbar-ts > .btn {
  display: block;
  width: 48%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
}
.live-series-clas .la-navbar-ts .add-clas {
  background-color: #fff;
  border: solid 1px #108ee9;
  color: #108ee9;
}
.live-series-clas .la-navbar-ts .save-data {
  background-color: #108ee9;
  border: 1px solid #108ee9;
  color: #fff;
}
.lesson-circle-zone .circle-zone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 12px;
}
.lesson-circle-zone .cc-cover-zone {
  margin-right: 12px;
  width: 80px;
  height: 80px;
  min-width: 80px;
}
.lesson-circle-zone .cc-cover-zone .cc-cover-img {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
}
.lesson-circle-zone .cc-info-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
}
.lesson-circle-zone .cc-info-main .info-cc-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: #404040;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.lesson-circle-zone .cc-info-main .info-extra {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.lesson-circle-zone .cc-info-main .info-extra .ex-left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  font-size: 12px;
  line-height: 20px;
  color: #878787;
}
.lesson-circle-zone .avatar-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 20px;
}
.lesson-circle-zone .avatar-list .a-item:not(:last-child) {
  margin-right: 5px;
}
.lesson-circle-zone .avatar-list .a-item .i-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.lesson-circle-zone .info-cc-topics {
  margin: 7px 1px;
}
.lesson-circle-zone .info-topic-list-wrapper {
  position: relative;
  height: 24px;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.08);
          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.lesson-circle-zone .info-topic-list .item {
  position: relative;
  padding: 0 15px;
  width: 100%;
  height: 24px;
  line-height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.lesson-circle-zone .info-topic-list .item::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  z-index: 1;
  margin: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ff4c52;
}
.invitationCard-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  min-width: 320px;
  max-width: 640px;
  z-index: 1;
  min-height: 500px;
  padding-bottom: 130px;
  background: url(/res/images/balls.svg) center 40% no-repeat;
  background-size: 100px auto;
}
.invitationCard-wrapper .review-img-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 130px;
}
.invitationCard-wrapper .review-img {
  height: 93%;
  border-radius: 10px;
  overflow: hidden;
}
.invitationCard-controller {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0 auto;
  width: 100%;
  min-width: 320px;
  max-width: 640px;
  background-color: #fff;
  text-align: center;
}
.invitationCard-controller #cardList-wrapper {
  text-align: left;
  overflow: hidden;
}
.invitationCard-controller .card-list {
  display: inline-block;
  padding: 15px 0 5px;
  font-size: 0;
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}
.invitationCard-controller .card-list .item {
  display: inline-block;
  position: relative;
  margin: 0 10px;
  width: 63px;
  height: 63px;
  overflow: hidden;
}
.invitationCard-controller .card-list .item:first-child {
  margin-left: 20px;
}
.invitationCard-controller .card-list .item:last-child {
  margin-right: 20px;
}
.invitationCard-controller .card-list .item .i-icon {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.invitationCard-controller .card-list .item.on::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  background-color: #000;
  opacity: .5;
}
.invitationCard-controller .card-list .item.on::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  background: url(/res/images/true_pay.png) center center no-repeat;
  background-size: 24px;
}
.invitationCard-controller .handle-btn {
  padding: 10px;
  font-size: 12px;
  line-height: 24px;
  color: #999999;
  background-color: transparent;
  border: none;
  outline: none;
}
.invitationCard-controller .handle-btn .icon {
  width: 24px;
  height: 24px;
}
.invitationCard-controller .chenck-qr-btn {
  width: 40px;
  height: 40px;
  background-color: #fff;
  position: absolute;
  right: 15px;
  bottom: 145px;
  z-index: 100;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 5px 2px rgba(241, 241, 241, 0.2);
          box-shadow: 0 0 5px 2px rgba(241, 241, 241, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: .8;
  border: none;
  outline: none;
}
.invitationCard-controller .chenck-qr-btn .icon {
  width: 18px;
  height: 18px;
}
.invitationCard-controller .handle-tie-text {
  font-size: 13px;
  color: #404040;
  letter-spacing: 1px;
  line-height: 20px;
  margin: 10px 0;
  text-align: center;
  display: block;
}
/* 提示 弹窗 */
.sale-tip-dialog {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: block;
}
.sale-tip-dialog .dialog-main {
  width: 80%;
  max-width: 400px;
  min-width: 240px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
}
.sale-tip-dialog .dialog-main.max-w65 {
  width: 65%;
}
.sale-tip-dialog .dialog-main .dialog-title {
  padding: 25px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
}
.sale-tip-dialog .dialog-main .dialog-summary {
  margin: 5px auto 20px;
  text-align: center;
  font-size: 12px;
  color: #999999;
  font-weight: 500;
  letter-spacing: .5px;
  line-height: 18px;
}
.sale-tip-dialog .dialog-main .dialog-content {
  display: inline-block;
  padding: 20px 24px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  color: #878787;
  text-align: left;
}
.sale-tip-dialog .dialog-main .dialog-content .p2 {
  text-align: center;
  font-size: 13px;
  color: #404040;
  letter-spacing: .5px;
  line-height: 13px;
}
.sale-tip-dialog .dialog-main .dialog-content .p3 {
  text-align: center;
  font-size: 12px;
  color: #999999;
  letter-spacing: .5px;
  line-height: 20px;
}
.sale-tip-dialog .dialog-main .dialog-footer {
  display: block;
  padding: 0;
  width: 100%;
  background-color: transparent;
  border: none;
  border-top: 1px solid #f2f2f2;
  text-align: center;
  height: 44px;
  line-height: 44px;
  font-size: 15px;
  color: #108ee9;
  cursor: pointer;
  outline: none;
}
.sale-tip-dialog .dialog-main .share-qrcode-zone {
  position: relative;
  display: block;
  margin-top: -20px;
  margin-bottom: -25px;
}
.sale-tip-dialog .dialog-main .share-qrcode-zone .text {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 13px;
  text-align: center;
}
.sale-tip-dialog .dialog-main .share-qrcode-zone .share-qrcode {
  position: relative;
  z-index: 10;
  width: 170px;
  height: 170px;
  padding: 30px;
  display: block;
  margin: 0 auto;
}
.share-card-button {
  position: absolute;
  right: 6px;
  top: 12px;
  z-index: 10;
  width: 35px;
  display: block;
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
}
.share-card-icon-wrap {
  font-size: 18px;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border-top-right-radius: 4px;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 10px #ccc;
          box-shadow: 0 2px 10px #ccc;
  text-align: center;
  border: 3px solid #ececec;
  color: #f7aa1c;
  position: relative;
  z-index: 3;
}
.share-card-icon-wrap .icon_sharecard {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 2px;
  -webkit-animation: shareCardShake linear 4s infinite;
          animation: shareCardShake linear 4s infinite;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.share-card-label-wrap {
  position: absolute;
  top: -10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  left: 50%;
  overflow: hidden;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  z-index: 2;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  white-space: nowrap;
}
.share-card-label-wrap label {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding-left: 15px;
  padding-right: 20px;
  background-color: rgba(240, 240, 240, 0.8);
  color: #666;
  font-size: 12px;
  top: 0;
  border-top-left-radius: 27px;
  border-bottom-left-radius: 27px;
  line-height: 30px;
  -webkit-box-shadow: 0 2px 7px rgba(102, 102, 102, 0.4);
          box-shadow: 0 2px 7px rgba(102, 102, 102, 0.4);
  -webkit-animation: shareCardLabel ease-out 0.3s;
          animation: shareCardLabel ease-out 0.3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  cursor: pointer;
}
@-webkit-keyframes shareCardShake {
  0% {
    -webkit-transform: rotateZ(0);
            transform: rotateZ(0);
  }
  90% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  91% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: rotateZ(24.21deg);
            transform: rotateZ(24.21deg);
  }
  95% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: rotateZ(-8deg);
            transform: rotateZ(-8deg);
  }
}
@keyframes shareCardShake {
  0% {
    -webkit-transform: rotateZ(0);
            transform: rotateZ(0);
  }
  90% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  91% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: rotateZ(24.21deg);
            transform: rotateZ(24.21deg);
  }
  95% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: rotateZ(-8deg);
            transform: rotateZ(-8deg);
  }
}
@-webkit-keyframes shareCardLabel {
  from {
    -webkit-transform: translateX(150%);
            transform: translateX(150%);
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes shareCardLabel {
  from {
    -webkit-transform: translateX(150%);
            transform: translateX(150%);
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.sale-cards-model {
  margin-bottom: 10px;
}
.sale-cards-model .sale-cards-list {
  background-color: #fff;
}
.sale-cards-model .sale-cards-list .item {
  position: relative;
  padding-right: 50px;
}
.sale-cards-model .sale-cards-list .item:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.sale-cards-model .sale-cards-list .item .delete-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  margin: auto;
  display: block;
  padding: 15px;
  height: 50px;
  background-color: transparent;
  border: none;
  outline: none;
}
.sale-cards-model .sale-cards-list .item .delete-btn .icon-del {
  width: 20px;
  height: 20px;
}
.sale-cards-model .item-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px;
}
.sale-cards-model .item-card .cover-zone {
  margin-right: 10px;
  width: 60px;
  min-width: 60px;
  height: 60px;
}
.sale-cards-model .item-card .cover-zone .cover-img {
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
     object-fit: cover;
}
.sale-cards-model .item-card .card-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  color: #404040;
  line-height: 20px;
}
.block-header-title {
  padding: 5px 15px;
  font-size: 12px;
  line-height: 15px;
}
.search-dialog,
.static-box-dialog {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  z-index: 1010;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}
.search-dialog .fixed-main,
.static-box-dialog .fixed-main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  max-width: 640px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.search-dialog .fixed-main .details-wrapper,
.static-box-dialog .fixed-main .details-wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
}
.search-dialog .fixed-main .close-zone,
.static-box-dialog .fixed-main .close-zone {
  position: relative;
  height: 20%;
  text-align: center;
}
.search-dialog .fixed-main .close-zone .close,
.static-box-dialog .fixed-main .close-zone .close {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 1;
  margin: -22px 0 0 -22px;
  display: inline-block;
  width: 44px;
  height: 44px;
  background: url(/res/images/lv-ico-close1.png) center center no-repeat;
  background-size: 35px 35px;
}
.search-dialog .fixed-main .m-loading,
.static-box-dialog .fixed-main .m-loading {
  margin: 10px 0;
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.search-dialog .fixed-main .m-loading .text,
.static-box-dialog .fixed-main .m-loading .text {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
}
.search-his {
  background-color: #fff;
}
.search-his .his-title {
  padding: 5px 15px 10px;
  font-size: 12px;
  color: #999999;
  border-bottom: 1px solid #f2f2f2;
}
.search-his .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.search-his .item .i-search-main {
  margin: 5px 10px 5px 15px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 15px;
  color: #404040;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-his .item .del-item-btn {
  padding: 12px 15px;
  background-color: transparent;
  border: none;
  outline: none;
}
.search-his .item .del-item-btn .icon {
  width: 20px;
  height: 20px;
}
.search-his .clear-his {
  padding: 12px 15px;
  font-size: 15px;
  color: #29a1f7;
  line-height: 20px;
  cursor: pointer;
}
.search-his .not-his {
  padding: 12px 15px;
  font-size: 12px;
  color: #999999;
  line-height: 20px;
  cursor: pointer;
}
.hot-search {
  background-color: #fff;
}
.hot-search .his-title {
  padding: 5px 15px 10px;
  font-size: 12px;
  color: #999999;
  border-bottom: 1px solid #f2f2f2;
}
.hot-search .hotword-list {
  font-size: 0;
  padding: 15px 15px 0;
}
.hot-search .hotword-list .item {
  display: inline-block;
  margin: 0 12px 15px 0;
  padding: 4px 10px;
  background-color: #fff;
  border: 1px solid #b3b3b3;
  border-radius: 5px;
  font-size: .3rem;
  line-height: .4rem;
  color: #999999;
}
.search-suggest-words {
  background-color: #fff;
}
.search-suggest-words .item {
  margin-left: 15px;
  padding: 15px 0 12px 0;
  font-size: 15px;
  color: #131313;
  line-height: 20px;
  border-bottom: 1px solid #f2f2f2;
}
.search-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
}
.search-bar.bdb {
  border-bottom: 1px solid #f2f2f2;
}
.search-bar .search-bar-zone {
  position: relative;
  margin-left: 15px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 34px;
  border-radius: 5px;
  background-color: #f2f2f2;
  overflow: hidden;
  white-space: nowrap;
}
.search-bar .search-bar-zone .icon {
  width: 24px;
  height: 24px;
  margin: 5px 0 5px 5px;
}
.search-bar .search-bar-zone .form-search {
  display: inline-block;
  width: 75%;
  height: 100%;
  background-color: transparent;
  border: none;
  font-size: 15px;
  color: #131313;
  outline: none;
}
.search-bar .search-bar-zone .form-search::-webkit-input-placeholder {
  color: #999999;
}
.search-bar .search-bar-zone .clear-btn {
  position: absolute;
  top: 2px;
  right: 0;
  z-index: 1;
  width: 30px;
  height: 30px;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  opacity: .8;
}
.search-bar .search-bar-zone .clear-btn .icon {
  width: 20px;
  height: 20px;
  display: block;
  margin: 5px;
}
.search-bar .submit-btn {
  height: 34px;
  padding: 0 15px;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: #108ee9;
}
.result-mian .result-mod {
  margin-bottom: 10px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
}
.result-mian .result-mod .result-title {
  padding: 10px 15px;
  font-size: 12px;
  color: #898f9c;
  border-bottom: 1px solid #ededed;
}
.result-mian .result-mod .block-navgat {
  display: block;
}
.result-mian .check-more-btn {
  margin-right: 6px;
  padding: 10px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 44px;
  border-top: 1px solid #f2f2f2;
  background: url(/res/images/circle-arr.png) right center no-repeat;
  background-size: 24px 24px;
  cursor: pointer;
}
.result-mian .check-more-btn .text {
  font-size: .3rem;
  color: #108ee9;
}
.result-mian .check-more-btn .icon {
  width: 24px;
  height: 24px;
}
.result-live .r-item {
  padding: 10px 15px;
}
.result-live .cover-zone {
  float: left;
  width: 60px;
  height: 60px;
}
.result-live .cover-zone .cover-img {
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
     object-fit: cover;
}
.result-live .i-main {
  margin-left: 70px;
}
.result-live .i-main .i-title {
  margin-bottom: 6px;
  height: 40px;
  font-size: 15px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 20px;
  letter-spacing: normal;
  color: #404040;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.result-live .i-main .i-extra {
  font-size: 12px;
  line-height: 14px;
  color: #999999;
}
.result-live .i-main .i-extra .i-time {
  display: inline-block;
  width: 30%;
}
.result-feature {
  padding: 20px;
}
.result-feature:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.top-search-zone {
  position: relative;
}
.top-search-zone .search-pilot {
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 100;
  padding: 0 15px;
  background-color: #f6f6f6;
  border-top: 1px solid #ededed;
}
.top-search-zone .search-pilot .item {
  padding: 10px 0;
  font-size: 13px;
  color: #29a1f7;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.top-search-zone .search-pilot .item:not(:last-child) {
  border-bottom: 1px solid #e4e4e4;
}
.top-search-zone .search-bar {
  position: relative;
  z-index: 101;
}
.live-search-zone {
  display: block;
  width: 100%;
  height: 44px;
  padding: 8px 15px;
  background-color: #fff;
  border: none;
  outline: none;
}
.live-search-zone.bg-home {
  background-color: #efeff4;
}
.live-search-zone .search-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 28px;
  border-radius: 5px;
  background-color: #ededed;
}
.live-search-zone .search-inner .icon {
  margin: 0 1px;
  width: 24px;
  height: 24px;
}
.live-search-zone .search-inner .text {
  margin: 0 1px;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  color: #999999;
}
.subscribing-dialog {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1010;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.subscribing-dialog .fixed-main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  max-width: 640px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.subscribing-dialog .fixed-main .finish-btn {
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 1;
  padding: 5px 18px;
  background-color: #5cb600;
  border-radius: 5px;
  border: none;
}
.subscribing-dialog .fixed-main .finish-btn .text {
  font-size: 13px;
  color: #fff;
  line-height: 20px;
}
.subscribing-dialog .fixed-main .close-zone {
  position: relative;
  height: 20%;
  text-align: center;
}
.subscribing-dialog .fixed-main .close-zone .close {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 1;
  margin: -22px 0 0 -22px;
  display: inline-block;
  width: 44px;
  height: 44px;
  background: url(/res/images/lv-ico-close1.png) center center no-repeat;
  background-size: 35px 35px;
}
.subscribing-dialog .subscribe-model {
  margin-bottom: 20px;
}
.subscribing-dialog .subscribe-model .dtw-tit {
  font-size: 16px;
  color: #404040;
  line-height: 30px;
}
.subscribing-dialog .subscribe-model .dtw-content {
  font-size: 0;
  padding-top: 5px;
}
.subscribing-dialog .subscribe-model .dtw-content .item {
  display: inline-block;
  width: 25%;
  padding: 0 5px;
  margin-top: 10px;
}
.subscribing-dialog .subscribe-model .dtw-content .item .dtwi-text {
  padding: .1rem 0;
  text-align: center;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #eee;
  font-size: .28rem;
  width: 100%;
}
.subscribing-dialog .details-wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 20px;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
}
.search-suggest-words {
  background-color: #fff;
}
.search-suggest-words .item {
  margin-left: 15px;
  padding: 15px 0 12px 0;
  font-size: 15px;
  color: #131313;
  line-height: 20px;
  border-bottom: 1px solid #f2f2f2;
}
.top-search-zone {
  position: relative;
  z-index: 10;
}
.top-search-zone .block-mod {
  position: absolute;
  top: 55px;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-bottom: 20px;
  background-color: #fff;
}
.pagehome-wrapper {
  min-height: 400px;
}
.upload-percent-zone {
  margin: 20px auto;
  width: 86%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.upload-percent-zone .progress-bar-zone {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 100%;
  margin-right: 10px;
}
.upload-percent-zone .progress-bar-zone .bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 3px;
  width: 100%;
  background-color: #ededed;
}
.upload-percent-zone .progress-bar-zone .bg .bar {
  display: block;
  width: 0;
  height: 100%;
  background-color: #108ee9;
}
.upload-percent-zone .percent-zone {
  display: block;
  width: 2.4rem;
  font-size: .3rem;
  line-height: 20px;
  color: #999999;
}
.upload-percent-zone .percent-zone .percent-num {
  font-size: .34rem;
  color: #108ee9;
}
.template-mod-header {
  position: relative;
  margin: 0 15px;
  padding: 15px 0;
  border-bottom: 1px solid #f2f2f2;
}
.template-mod-header .title {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
  line-height: 15px;
}
.template-mod-header .more-btn {
  position: absolute;
  right: 0;
  top: 3px;
  z-index: 1;
  display: inline-block;
  padding: 15px;
  line-height: 15px;
}
.template-mod-header .more-btn .icon {
  width: 12px;
  height: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
}
.template-mod-header .more-btn .text {
  margin-right: 6px;
  font-size: 12px;
  line-height: 15px;
  color: #999999;
  vertical-align: middle;
}
.template-mod-header .replace-btn {
  position: absolute;
  right: -15px;
  top: 0;
  z-index: 1;
  display: block;
  padding: 12px 15px;
  border: none;
  background-color: transparent;
  text-align: center;
}
.template-mod-header .replace-btn .icon {
  width: 24px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: top;
}
.template-mod-header .replace-btn .text {
  margin-right: 6px;
  font-size: 13px;
  line-height: 24px;
  color: #999999;
  vertical-align: top;
}
[v-cloak] {
  display: none;
}
